网页端 裁剪图片，不需要经过服务器。
这个是用 https://github.com/mailru/fileapi 框架实现的。配合jcrop.
高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。
核心代码：
var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ fileapi.event.on(el, 'change', function (evt){ var files = fileapi.getfiles(evt); // retrieve file list fileapi.filterfiles(files, function (file, info){ if( !/^image/.test(file.type) ){ alert('图片格式不正确'); return false; } else if(file.size > 20 * fileapi.mb){ alert('图片必须小于20m'); return false; } else{ return true; } }, function (files, rejected){ console.log(files); if( files.length ){ var file = files[0]; var img0 = fileapi.image(file); var img1 = fileapi.image(file); var ratio = 0; fileapi.getinfo(file, function (err, info) { //get image ratio if (!err) { if (info.width > info.height) { ratio = info.width / 500; } else { ratio = info.height / 500; } } }); img0.resize(500, 500, 'max') //place image and register jcrop .get(function(err, img) { $('#img2').empty(); $('#img2').append($(img)); $('#img2').children().jcrop({ aspectratio: 1, bgcolor: 'rgba(0,0,0,0.4)', onselect: function(c) { img1.matrix.sx = c.x * ratio; img1.matrix.sy = c.y * ratio; img1.matrix.sw = c.w * ratio; img1.matrix.sh = c.h * ratio; img1.matrix.dw = 500; img1.matrix.dh = 500; img1.get(function(err, img) { // $('#img3').empty(); // $('#img3').append($(img)); $('#img3').html($(img)); }); } }); }); $('#btn').on('click',function(){ fileapi.upload({// url: '/testupfile/upfile', // headers: { 'content-type': 'multipart/form-data' }, files: { images: img1 }, progress: function (evt){ /* ... */ }, complete: function (err, xhr){ /* ... */ //alert(xhr.responsetext); console.log(xhr); } }); }); } }); }); });
完整代码：
todo supply a title 上传

以上所述就是本文的全部内容了，希望大家能够喜欢。