JavaScript picture Clipping

1.jquery Picture Clipping Library selection

Jcrop:http://deepliquid.com/content/jcrop.html

imgareaselect:http://odyniec.net/projects/imgareaselect/

Cropzoom:https://github.com/cropzoom/cropzoom

There are many jquery plugins to choose from, here you can choose Imgareaselect for a specific demonstration

2. Comprehensive Demo effect

2.1 The left side area is the div + img tag, used to display the original, detailed requirements

(1) The left side shows the original image uploaded by the user, which can be super large and small.

Large picture on equal scale compression display, small picture does not compress

(2) The maximum width of the left side area is 608px. This parameter requirement can be customized!

(3) Cut on the left side, requires clipping according to the aspect ratio of the right side preview area

2.2 Right side area is also div + img tag. A preview to show the cropped section

(1) The aspect of the preview area is 608*304, which requires the ability to customize

(2) The left side of the clipping part of the picture is shown here full screen

This requirement is actually based on the user experience. Guarantee the effect:

(1) The original image, no matter how small, will be displayed according to the original proportion

(2) The left side area is fixed to the maximum width, so the left side will not be too wide, "cause the right side preview no Place"

But be careful. Suppose the user uploads a very small graph. And the "cropped part" itself is less than "preview High"

So the proportional stretching display, in fact, can do not stretch, but this kind of words affect the overall page layout!

The above-mentioned parameters should be very specific. Provides metrics for the original, left side display, crop area, right side preview

And it calculates the point coordinates on the original image according to the "left side display" + "original" + "crop area coordinates".

This makes it easy to cut the original image in the background.

3, two times package and implementation

(1) Support for calculating various coordinates of the callback function

(2) Support the customization of various indicators on the left and right side

(3) Support image loading is complete before beginning to appear effect

Prevents users from uploading large images. The Imgareaselect method is called when the picture is not loaded. Cause no effect in some browsers

An example of a simple demo, which is officially provided, is actually problematic when it comes to uploading oversized images, such as 10M pictures.

Let's look at the HTML code first. Very easy

<input type= "button" value= "Upload" onclick= "testupload ()"/> <br/>x1:<input id= "X1" type= "text"/>y1: <input id= "Y1" type= "text"/><br/>x2:<input id= "X2" type= "text"/>y2:<input id= "Y2" type= "text"/& Gt;<br/> Clipping area width: <input id= "Awidth" type= "text"/> Crop area height: <input id= "Aheight" type= "text"/> <br/> True width: <input id= "Rwidth" type= "text"/> true height: <input id= "Rheight" type= "text"/> <br/> show width: <input ID = "Swidth" type= "text"/> Display height: <input id= "Sheight" type= "text"/> <br/> preview width: <input id= "PWidth" type= " Text "/> Preview height: <input id=" Pheight "type=" text "/> <br/>
 
  Another look at how to invoke  
 
<title> picture clipping </title><link rel= "stylesheet" type= "Text/css" href= "<%=context%>/staticfile/ Imgselect/css/imgareaselect-default.css "/><script type=" Text/javascript "src=" <%=context%>/ Staticfile/imgselect/scripts/jquery.min.js "></script><script type=" Text/javascript "src=" <%= Context%>/staticfile/imgselect/scripts/jquery.imgareaselect.pack.js "></script><script type=" text /javascript "src=" <%=context%>/staticfile/imgselectedarea.js "></script>
Note: calling the Initimgselectedarea method is possible. Passes a JSON object.
A bit JSON object is required to provide several parameters and callback functions, in which the callback function is optional!

This method is defined in the imgselectedarea.js
Finally, let's take a look at Imgselectedarea.js file
/** * Picture Clipping * * @param initobj{* leftdiv: Left div container * Rightdiv: Right side div Container * IMGSRC: Original address * Prewidth: Right side Preview chart required width * Preheight: Right side preview The height required by the graph * Getimginfo: Return the original image, the left side finally shows the high-width callback function * Getareainfo: Returns the left side clipping area coordinates, high width. and the coordinates mapped to the original image *} * @returns {succeed: (True|false), msg: ' Processing result '} * * @author yli */function Initimgselectedarea (initobj) {if (initobj) {var leftdiv = Initobj.leftdiv | | Undefined;var rightdiv = INITOBJ.RIGHTDIV | | Undefined;var imgsrc = INITOBJ.IMGSRC | | un Defined;var prewidth = Initobj.prewidth | | 100;var preheight = Initobj.preheight | | 100;if (!leftdiv | |!rightdiv | |!imgsrc) {return {succeed:false,msg: ' parameter Initobj property {LEFTDIV,RIGHTDIV,IMGSRC} Not defined! '};} Get the left side area in the img tag var leftimg = Leftdiv.find ("img");//Bind the Img.onload event to ensure that the cropping area is initialized after the picture is loaded leftimg.load (function () {// Picture true width and height var realwidth = $ (this). Width (), var realheight = $ (this). Height ();//The left side area requires the original image to be displayed, regardless of the original number of the most small/ Because the left-side area div width is limited by prewidth, it is proportional to the extra-wide picture to compress if (realwidth>prewidth) {$ (this). CSS ({width:prewidth,height: (prewidth* realheight)/realwidth});} //left Area property is set to show the picture $ (this). CSS ({display: ' block '}),//pre-load to the right-hand area of the picture, in the hidden state//cropped left-side area of the picture to show the right side of the preview if (Rightdiv.find ("img"). Size () ==0) {rightdiv.append ('  ');} else {rightdiv.find ("img"). CSS ({display: ' None '}). attr ("src", imgsrc);} Left area The original image may be compressed to display (see previous step)//While the clipping area is based on the high width of the display area, so get the high-width var showwidth = $ (this) of the display graph. width (); var showheight = $ (this). Height ()///left area picture clipping function for triggering call var SelectedChange = Functions (IMG, selection) {///here uses the preview area size to calculate the scale var ScaleX = prewidth/(selection.wi DTH | |    1);        var ScaleY = preheight/(Selection.height | | 1);    $ ("#sX"). Val (showwidth + '---> ' + prewidth);        $ ("#sY"). Val (showheight + '---> ' + preheight);        The Rightdiv.find ("img") is calculated based on the left side picture size. css ({display: ' Block ', Width:Math.round (ScaleX * showwidth) + ' px ',        Height:Math.round (ScaleY * showheight) + ' px ', marginleft: '-' + math.round (ScaleX * selection.x1) + ' px ', MarginTop: '-' + math.round (ScaleY * selection.y1) +' px '}); Call the callback function to return the crop area information if (initobj.getareainfo) {initobj.getareainfo ({x1:selection.x1,//) the upper-left corner of the cropping area x1y1:selection.y1,// Crop area upper left corner y1x2:selection.x2,//cropping area lower right corner x2y2:selection.y2,//cropping area bottom right x2width:selection.width,//crop area width Height: selection.height,//Clipping Area height rX1:Math.round (realwidth*selection.x1/showwidth),//clipping point maps to the coordinates on the actual original image RY1:Math.round ( Realheight*selection.y1/showheight), RX2:Math.round (Realwidth*selection.x2/showwidth), RY2:Math.round (realheight    *selection.y2/showheight)}); }};//initializes the cropping area according to the scale of the preview, and initializes the largest clipping region according to the possible maximum display area on the left side var previewratio = prewidth+ ': ' +preheight;leftimg.imgareaselect ({ Aspectratio:previewratio,handles:true, Maxwidth:showwidth,maxheight:showheight,onselectchange:selectedchange}) ;//Call callback function, return picture information if (initobj.getimginfo) {initobj.getimginfo ({realwidth:realwidth,//picture true width realheight:realheight,/ /Picture True height showwidth:showwidth,//display width showheight:showheight//display height});  }); Load the Left area img, initialize the hidden Leftimg.css ({display: ' None '}). attr ("src", imgsrc);} else {return {succeed:false,msg: ' method in InitobJ Not defined! '};}} 

4. Code download
Http://cloud.suning.com/cloud-web/share/link.htm?
Sk=aaactu
 
JavaScript picture Clipping