image-zoom-cropper
Absolutely minimal version of GSIV to work with touch screens and very slow processors.
Last updated 6 years ago by daedelus-j .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install image-zoom-cropper 
SYNC missed versions from official npm registry.

Zoom / Drag Based Image Cropper

Heavily based off of https://github.com/craigfrancis/zoomify

Build Status

Changes:

  • Converted to prototypal structure
  • Uses npm
  • Uses Browserify
  • Mouse wheel zoom is off
  • Added scroller based zoom
  • Image size is contrained by its outer div = image cannot be smaller than the div

Installation

npm install
npm install -g jade

// Builds demo and runs live compilation of jade, scss, and javascript via browserify
npm start

Usage

var ImageZoomCropper = require('./index');
var dom = require('dom-events');

// Pane resize is pptional
var izc = new ImageZoomCropper({
  src: '../images/f1.jpg',
  paneResize: {
    height: {
      min: 225,
      max: 900
    },
    width: {
      min: 225,
      max: 800
    }
  }
});

var prependEl = document.querySelector('body');
prependEl.insertBefore(izc.getEl(), prependEl.firstChild);

var btnEnable = document.querySelector('.btn.enable');
var btnDisable = document.querySelector('.btn.disable');

dom.on(btnEnable, 'click', izc.enable);
dom.on(btnDisable, 'click', izc.disable);

// event callback to get translated coords
// translated coordinates = crop coords for the original image size
izc.on('data', function(data) {
  document.getElementById('left').value = data.coords.left;
  document.getElementById('right').value = data.coords.right;
  document.getElementById('top').value = data.coords.top;
  document.getElementById('bottom').value = data.coords.bottom;
  document.getElementById('width').value = data.zoom.width;
  document.getElementById('height').value = data.zoom.height;
  document.getElementById('zoom-top').value = data.zoom.top;
  document.getElementById('zoom-left').value = data.zoom.left;
});

izc.on('save', function(data) {
  console.log('data: ', data);
  izc.disable();
});

izc.on('cancel', function() {
  izc.disable();
});

Current Tags

  • 0.0.4                                ...           latest (6 years ago)

2 Versions

  • 0.0.4                                ...           6 years ago
  • 0.0.2                                ...           6 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 0
Dependencies (5)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |