轻量级的剪裁头像图片插件：Cropbox

Cropbox 是一个轻量级的简单的的剪裁头像插件，可以分别使用 JavaScript, Jquery, YUI 实现图片头像剪裁。选择一张待剪裁的头像后，头像图片会被 javascript 的编码后等待处理，而不用先上传到服务器。
使用说明
Javascript调用：

1. window.onload = function() { 
2.     var options = 
3.     { 
4.         imageBox: '.imageBox', 
5.         thumbBox: '.thumbBox', 
6.         spinner: '.spinner', 
7.         imgSrc: 'avatar.png' 
8.     } 
9.     var cropper = new cropbox(options); 
10.     document.querySelector('#file').addEventListener('change', function(){ 
11.         var reader = new FileReader(); 
12.         reader.onload = function(e) { 
13.             options.imgSrc = e.target.result; 
14.             cropper = new cropbox(options); 
15.         } 
16.         reader.readAsDataURL(this.files[0]); 
17.         this.files = []; 
18.     }) 
19.     document.querySelector('#btnCrop').addEventListener('click', function(){ 
20.         var img = cropper.getDataURL() 
21.         document.querySelector('.cropped').innerHTML += '<img src="'+img+'">'; 
22.     }) 
23.     document.querySelector('#btnZoomIn').addEventListener('click', function(){ 
24.         cropper.zoomIn(); 
25.     }) 
26.     document.querySelector('#btnZoomOut').addEventListener('click', function(){ 
27.         cropper.zoomOut(); 
28.     }) 
29. }; www.bcty365.com

jQuery调用：
 

1. $(window).load(function() { 
2.     var options = 
3.     { 
4.         thumbBox: '.thumbBox', 
5.         spinner: '.spinner', 
6.         imgSrc: 'avatar.png' 
7.     } 
8.     var cropper = $('.imageBox').cropbox(options); 
9.     $('#file').on('change', function(){ 
10.         var reader = new FileReader(); 
11.         reader.onload = function(e) { 
12.             options.imgSrc = e.target.result; 
13.             cropper = $('.imageBox').cropbox(options); 
14.         } 
15.         reader.readAsDataURL(this.files[0]); 
16.         this.files = []; 
17.     }) 
18.     $('#btnCrop').on('click', function(){ 
19.         var img = cropper.getDataURL() 
20.         $('.cropped').append('<img src="'+img+'">'); 
21.     }) 
22.     $('#btnZoomIn').on('click', function(){ 
23.         cropper.zoomIn(); 
24.     }) 
25.     $('#btnZoomOut').on('click', function(){ 
26.         cropper.zoomOut(); 
27.     }) 
28. }); 
29.   
30. // use with require js (new feature added on 9 Oct 2014) 
31. require.config({ 
32.     baseUrl: "../", 
33.     paths: { 
34.         jquery: 'jquery-1.11.1.min', 
35.         cropbox: 'cropbox' 
36.     } 
37. }); 
38. require( ["jquery", "cropbox"], function($) { 
39.     var options = 
40.     { 
41.         thumbBox: '.thumbBox', 
42.         spinner: '.spinner', 
43.         imgSrc: 'avatar.png' 
44.     } 
45.     var cropper = $('.imageBox').cropbox(options); 
46.     $('#file').on('change', function(){ 
47.         var reader = new FileReader(); 
48.         reader.onload = function(e) { 
49.             options.imgSrc = e.target.result; 
50.             cropper = $('.imageBox').cropbox(options); 
51.         } 
52.         reader.readAsDataURL(this.files[0]); 
53.         this.files = []; 
54.     }) 
55.     $('#btnCrop').on('click', function(){ 
56.         var img = cropper.getDataURL(); 
57.         $('.cropped').append('<img src="'+img+'">'); 
58.     }) 
59.     $('#btnZoomIn').on('click', function(){ 
60.         cropper.zoomIn(); 
61.     }) 
62.     $('#btnZoomOut').on('click', function(){ 
63.         cropper.zoomOut(); 
64.     }) 
65.     } 
66. ); 

官方地址：http://hongkhanh.github.io/cropbox/