image-zoom-cropper

Zoom / Drag Based Image Cropper

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

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();
});