JavaScript 图像剪裁：cropbox.js

jopen 9年前

cropbox.js 是一个实现了图像在线剪裁的 jQuery 、YUI 插件和 JavaScript 库。

Pure javascript

window.onload = function() {      var options =      {          imageBox: '.imageBox',          thumbBox: '.thumbBox',          spinner: '.spinner',          imgSrc: 'avatar.png'      }      var cropper = new cropbox(options);      document.querySelector('#file').addEventListener('change', function(){          var reader = new FileReader();          reader.onload = function(e) {              options.imgSrc = e.target.result;              cropper = new cropbox(options);          }          reader.readAsDataURL(this.files[0]);          this.files = [];      })      document.querySelector('#btnCrop').addEventListener('click', function(){          var img = cropper.getDataURL()          document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';      })      document.querySelector('#btnZoomIn').addEventListener('click', function(){          cropper.zoomIn();      })      document.querySelector('#btnZoomOut').addEventListener('click', function(){          cropper.zoomOut();      })  };

Demo

Jquery plugin

$(window).load(function() {      var options =      {          thumbBox: '.thumbBox',          spinner: '.spinner',          imgSrc: 'avatar.png'      }      var cropper = $('.imageBox').cropbox(options);      $('#file').on('change', function(){          var reader = new FileReader();          reader.onload = function(e) {              options.imgSrc = e.target.result;              cropper = $('.imageBox').cropbox(options);          }          reader.readAsDataURL(this.files[0]);          this.files = [];      })      $('#btnCrop').on('click', function(){          var img = cropper.getDataURL()          $('.cropped').append('<img src="'+img+'">');      })      $('#btnZoomIn').on('click', function(){          cropper.zoomIn();      })      $('#btnZoomOut').on('click', function(){          cropper.zoomOut();      })  });    // use with require js (new feature added on 9 Oct 2014)  require.config({      baseUrl: "../",      paths: {          jquery: 'jquery-1.11.1.min',          cropbox: 'cropbox'      }  });  require( ["jquery", "cropbox"], function($) {      var options =      {          thumbBox: '.thumbBox',          spinner: '.spinner',          imgSrc: 'avatar.png'      }      var cropper = $('.imageBox').cropbox(options);      $('#file').on('change', function(){          var reader = new FileReader();          reader.onload = function(e) {              options.imgSrc = e.target.result;              cropper = $('.imageBox').cropbox(options);          }          reader.readAsDataURL(this.files[0]);          this.files = [];      })      $('#btnCrop').on('click', function(){          var img = cropper.getDataURL();          $('.cropped').append('<img src="'+img+'">');      })      $('#btnZoomIn').on('click', function(){          cropper.zoomIn();      })      $('#btnZoomOut').on('click', function(){          cropper.zoomOut();      })      }  );

Demo