The jQuery plug-in jcrop + Fileapi perfectly implements Image Upload, cropping, and preview code sharing,

The jQuery plug-in jcrop + Fileapi perfectly implements Image Upload, cropping, and preview code sharing,

Crop images on the webpage without passing through the server.

This is implemented with a https://github.com/mailru/FileAPI framework. With jcrop.

Advanced browsers use canvas cropping, and ie6 7 8 uses flash excessively.

Core code:

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 ('incorrect image format'); return false;} else if (file. size> 20 * FileAPI. MB) {alert ('image must be smaller than 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.4, 0,) ', 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); values ('{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 );}});});}});});});

Complete code:

<! DOCTYPE html> 
The above is all the content of this article. I hope you will like it.