JavaScript image cropping and javascript Cropping

JavaScript image cropping and javascript Cropping
1. jquery image cropping library selection

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

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

CropZoom: https://github.com/cropzoom/cropzoom

There are a lot of jQuery plug-ins available for selection. Here we select imgareaselect for detailed demonstration.

 

2. Comprehensive demonstration

 

2.1 The left side is the div + img tag, which is used to display the source image.

(1) The source image uploaded by the user is displayed on the left. The source image can be large or ultra-small. A large image is displayed after proportional compression, while a small image is not compressed.

(2) The maximum width of the left side is 608px. You can customize this parameter!

(3) crop the image on the left according to the aspect ratio of the preview area on the right.

2.2 The area on the right is also a div + img label, used to display the preview of the [cropping part]

(1) the height and width of the preview area are 608*304, which can be customized.

(2) The cropped image on the left is displayed in full screen.

This requirement is based on the user experience, ensuring the effect:

(1) No matter how small the source image is, it will be displayed in proportion to the original image.

(2) The maximum width of the Left area is fixed, so that the left side is not too wide. [This leads to no position in the right preview]

However, if you upload a small image and the cropped part is smaller than the preview height]

In fact, the display can be scaled without being stretched, but this will affect the overall page layout!

 

The above parameter indicators should be very detailed and provide the indicators for the source image, the left-side display chart, the cropping area, and the right-side preview chart.

And the crop point coordinates on the source image are calculated based on the [display graph on the Left] + [Source image] + [crop area coordinates ].

This allows you to crop the source image in the background!

 

3. Secondary encapsulation and implementation

(1) supports callback functions for calculating various coordinates

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

(3) Support for effect only after image loading is completed

The imgAreaSelect method is called to prevent users from uploading large images before the images are fully loaded, leading to ineffective uploading in Some browsers.

Simple examples provided by the official website are all problematic when uploading large images, such as 10 m images.

The html code is very simple.

<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"/> <br/> crop area width: <input id = "aWidth" type = "text"/> crop area Height: <input id = "aHeight" type = "text"/> <br/> width: <input id = "rWidth" type = "text"/> actual height: <input id = "rHeight" type = "text"/> <br/> display width: <input id = "sWidth" type = "te Xt "/> display height: <input id =" sHeight "type =" text "/> <br/> preview width: <input id = "pWidth" type = "text"/> preview height: <input id = "pHeight" type = "text"/> <br/> 

Let's see how to call
<Title> image cropping </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:CallInitImgSelectedAreaMethod to upload a json object. Several parameters and callback functions are required for a json object. The callback function is optional!
This method is inImgSelectedArea. jsDefined
Finally, let's take a look at the imgSelectedArea. js file.

/*** Image cropping ** @ param initObj {* leftDiv: Left div container * rightDiv: Right div container * imgSrc: source image address * preWidth: width * preHeight: height required by the preview image on the right * getImgInfo: return the source image and the callback function for the height and width of the final display on the left * getAreaInfo: returns the coordinates of the cropping area on the left, the height and width, and the coordinates mapped to the source image *} * @ returns {succeed :( true | false), msg: 'processing result'} ** @ author yli */function initImgSelectedArea (initObj) {if (initObj) {var leftDiv = initObj. leftDiv | undefined; var rightDiv = initObj. rightDiv | u Ndefined; var imgSrc = initObj. imgSrc | undefined; var preWidth = initObj. preWidth | 100; var preHeight = initObj. preHeight | 100; if (! LeftDiv |! RightDiv |! ImgSrc) {return {succeed: false, msg: 'The initObj attribute {leftDiv, rightDiv, imgSrc} is not defined! '};}// Obtain the img label var leftImg = leftDiv in the left-side Navigation Pane. find ("img"); // bind img. onload event to ensure that the cropping area leftImg is initialized only after the image is loaded. load (function () {// The true width and height of the image var realWidth =$ (this ). width (); var realHeight = $ (this ). height (); // The Left area requires that all the source images be displayed, no matter how small the source image is. // The div width in the left area is limited by preWidth, therefore, if (realWidth> preWidth) then adjust (thisw..css ({width: preWidth, height :( preWidth * realHeight)/realWidth});} // when the left side is complete, the image then (thisw..css (display: 'block '} ); // Pre-load the image in the right region and hide it. // crop the image in the left region to display the preview image on the right if (rightDiv. find ("img "). size () = 0) {rightDiv. append ('');} else {rightDiv. find ("img" cmd.css ({display: 'none '}). attr ("src", imgSrc);} // the original image in the left area may be displayed in proportional compression (see the previous step). // The cropping area is based on the height and width of the display area, therefore, the var showWidth =$ (this) of the displayed graph is obtained ). width (); var showHeight = $ (this ). height (); // The function var selectedChange = function (img, Selection) {// use the preview area size to calculate the ratio var scaleX = preWidth/(selection. width | 1); var scaleY = preHeight/(selection. height | 1); $ ("# sX "). val (showWidth + '--->' + preWidth); $ ("# sY "). val (showHeight + '--->' + preHeight); // here, the rightDiv is calculated based on the size of the left image. find ("img" cmd.css ({display: 'block', width: Math. round (scaleX * showWidth) + 'px ', height: Math. round (scaleY * showHeight) + 'px ', marginLeft:'-'+ Math. rou Nd (scaleX * selection. x1) + 'px ', marginTop:'-'+ Math. round (scaleY * selection. y1) + 'px '}); // call the callback function and return the cropping region information if (initObj. getAreaInfo) {initObj. getAreaInfo ({x1: selection. x1, // x1y1: selection in the upper left corner of the cropping area. y1, // y1x2: selection in the upper left corner of the cropping area. x2, // x2y2: selection in the lower right corner of the cropping area. y2, // x2width: selection. width, // crop area width height: selection. height, // crop area height rX1: Math. round (realWidth * selection. x1/showWidth), // crop point mapped to the true source image coordinate rY1: M Ath. round (realHeight * selection. y1/showHeight), rX2: Math. round (realWidth * selection. x2/showWidth), rY2: Math. round (realHeight * selection. y2/showHeight)}) ;}}; // initialize the cropping area based on the ratio of the preview image, and initialize the largest Cropping Area var previewRatio = preWidth + 'based on the maximum display area on the left ': '+ preHeight; leftImg. imgAreaSelect ({aspectRatio: previewRatio, handles: true, maxWidth: showWidth, maxHeight: showHeight, onSelectChange: selectedChange}); // call the callback function to return the image information if (initObj. GetImgInfo) {initObj. getImgInfo ({realWidth: realWidth, // realHeight: realHeight, // showWidth: showWidth, // display width showHeight: showHeight // display height}) ;}}); // load the Img in the left-side Navigation Pane, initialize and hide leftImg.css ({display: 'none '}). attr ("src", imgSrc);} else {return {succeed: false, msg: 'The method input parameter initObj is not defined! '};}}

4. Download Code
Http://cloud.suning.com/cloud-web/share/link.htm? Sk = aaacTU

Use Javascript to crop images. Let's take a look.
Bbs.blueidea.com/thread-2900687-1-1.html
 
Who has the javascript image cropping code,
I wonder if you want this.
Interface. eyecon. ro/demos/resize.html