A very powerful image cropping plugin based on the jquery feature

Today we are going to introduce a very powerful based on the jquery image cutting plug-in, this jquery picture clip plug-in can choose the size of the crop box scale, you can set a high-wide size, you can set the image flipping angle, of course, also support the image zoom, crop box can also be dragged with the mouse. As follows:

Online preview Source Download

Take a look at the implementation code, here we look at JavaScript code

To get a canvas canvas for a picture:

functionGetsourcecanvas (image, data) {varCanvas = $ (' <canvas> ') [0], Context= Canvas.getcontext (' 2d '), Width=data.naturalwidth, Height=data.naturalheight, rotate=data.rotate, rotated=getrotatedsizes ({width:width, height:height, degree:rotate}); if(rotate) {canvas.width=Rotated.width; Canvas.height=Rotated.height;      Context.save (); Context.translate (Rotated.width/2, ROTATED.HEIGHT/2); Context.rotate (Rotate* math.pi/180); Context.drawimage (Image,-WIDTH/2,-HEIGHT/2, width, height);    Context.restore (); } Else{canvas.width=width; Canvas.height=height; Context.drawimage (Image,0, 0, width, height); }    returnCanvas; }

Load Picture:

Prototype.load =function(URL) {varOptions = This. Options, $ This= This. $element, Crossorigin, Bustcacheurl, Buildevent, $clone; if(!URL) {      if($ This. Is (' img ')) {        if(!$ This. attr (' src ')) {          return; } URL= $ This. Prop (' src '); } Else if($ This. is (' canvas ') &&Support_canvas) {URL= $ This[0].todataurl (); }    }    if(!URL) {      return; } buildevent= $.    Event (Event_build); $ This. One (Event_build, options.build). Trigger (Buildevent);//Only Trigger once    if(buildevent.isdefaultprevented ()) {return; }    if(Options.checkimageorigin &&iscrossoriginurl (URL)) {Crossorigin= ' Anonymous '; if(!$ This. Prop (' Crossorigin ')) {//Only when there is not a "crossorigin" propertyBustcacheurl = Addtimestamp (URL);//Bust Cache (#148)      }    }     This. $clone = $clone = $ ('  '); $clone. One (' Load ', $.proxy (function () {      varNaturalwidth = $clone. Prop (' Naturalwidth ') | |$clone. Width (), Naturalheight= $clone. Prop (' Naturalheight ') | |$clone. Height ();  This. Image ={naturalwidth:naturalwidth, naturalheight:naturalheight, Aspectratio:naturalwidth/naturalheight, rotate:0      };  This. url =URL;  This. Ready =true;  This. Build (); },  This). One (' Error ',function() {$clone. Remove (); }). attr ({src:bustcacheurl||URL, crossorigin:crossorigin}); //Hide and insert into the document$clone. addclass (class_hide). InsertAfter ($ This); };

Preview:

Prototype.initpreview =function () {    varURL = This. URL;  This. $preview = $ ( This. Options.preview);  This. $viewBox. html ('  '); //Override img Element Styles    //Add ' display:block ' to avoid margin top issue (occur only when Margin-top <=-height)     This. $preview. Each (function () {      var$ This= $( This); $ This. Data (Cropper_preview, {width: $ This. Width (), Height: $ This. Height (), Original: $ This. HTML ()}). HTML (' );  }); };

via:http://www.w2bc.com/article/37726

A very powerful image cropping plugin based on the jquery feature