这篇文章主要介绍了jQuery插件jcrop+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);

}

});

});

}

});

});

});

完整代码：

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

更多信息请查看IT技术专栏