jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

网页端裁剪图片，不需要经过服务器。
这个是用 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 ratioif （！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）;}}）;}）;}}）;}）;}）;

完整代码：

<！DOCTYPE html><html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><script src="./jquery.min.js"></script><script src="./jcrop/jquery.Jcrop.min.js"></script><link href="./jcrop/jquery.Jcrop.min.css" rel="stylesheet"></head><style>.upload-btn {width: 130px;height: 25px;overflow: hidden;position: relative;border: 3px solid #06c;border-radius: 5px;background: #0cf;}.upload-btn:hover {background: #09f;}.upload-btn__txt {z-index: 1;position: relative;color: #fff;font-size: 18px;font-family: "Helvetica Neue";line-height: 24px;text-align: center;text-shadow: 0 1px 1px #000;}.upload-btn input {top: -10px;right: -40px;z-index: 2;position: absolute;cursor: pointer;opacity: 0;filter: alpha（opacity=0）;font-size: 50px;}</style> <body><div><！-- "js-fileapi-wrapper" -- required class --><div class="js-fileapi-wrapper upload-btn" id="choose"> <input name="files" type="file" multiple /><button id="btn">上传</button></div><div id="images"> <p style="margin-top: 40px;"></p><div id="img2" ></div><div id="img3"></div></div></div><script>window.FileAPI = { staticPath: "./fileapi/" };</script><script src="./fileapi/FileAPI.min.js"></script><script> var el = $（"input"）.get（0）; FileAPI.event.on（el, "change", function （evt）{var files = FileAPI.getFiles（evt）; // Retrieve file listFileAPI.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）{ 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 ratioif （！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", files: { images: img1 },progress: function （evt）{ /* ... */ },complete: function （err, xhr）{ /* ... *///alert（xhr.responseText）; }}）;}）;}}）;}）;</script></body></html>

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