JavaScript 图像剪裁:cropbox.js
jopen
10年前
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(); }) };
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(); }) } );
Features
- support dataUrl for displaying image (function getDataURL)
- support Blob for uploading image (function getBlob)