Simple sample code for cropping and storing images using Javascript

Cropping images is not familiar to us, and we have encountered this demand in our recent work. So we want to simply sort out the image and learn it as needed, therefore, this article mainly introduces the simple implementation of cropping images and storing images using Javascript. I am using the THINKPHP framework for backend PHP processing. For more information, see. Cropping images is not familiar to us, and we have encountered this demand in our recent work. So we want to simply sort out the image and learn it as needed, therefore, this article mainly introduces the simple implementation of cropping images and storing images using Javascript. I am using the THINKPHP framework for backend PHP processing. For more information, see.

Preface

As far as I am concerned, there are not many flexible pages, such as slide verification codes and image cropping.

From the very beginning, I wanted to understand these things, but I had no need to do so. I took the free time to study these things for one afternoon and encountered big and small problems, it has been suffering, but it actually reflects a problem.

Still relatively weak.

Effect:

After you Click Upload image, the page displays the uploaded image, and the cropping box and two preview areas appear. Finally, click the crop button to save the cropped image to the server.

The effect is very simple. I encountered two difficulties throughout the process. The first is the JS Effect of cropping, and the second is the processing of image data.

For the first question, I referenced a plug-in on the Internet. As far as I feel, the user satisfaction in the cropping process is average, because it can only crop square areas, even if there are eight pull settings on the border, but the pull box is still scaled by the square, this is not satisfactory to me.

The implementation method is as follows:

The following is a simple page design:

The following is the JS Code:

Function change_image (file) {var reader = new FileReader (); reader. onload = function (evt) {$ ("# target" failed get. result); // (('{target'}.css ({"height": "600px", "width": "600px"}); // the effect that affects the size}; reader. readAsDataURL (file. files [0]); var jcrop_api, boundx, boundy; setTimeout (function () {$ ('# target '). jcrop ({minSize: [190,190], setSelect: [,], onChange: updatePreview, onSelect: updatePreview, onSelect: updateCoords, aspectRatio: 1}, function () {// Use the API to get the real image sizevar bounds = this. getBounds (); boundx = bounds [0]; boundy = bounds [1]; // Store the API in the jcrop_api variablejcrop_api = this;}); function updatePreview (c) {if (parseInt (c. w)> 0) {var rx = 48/c. w; // The size var ry = 48/c.hsf-← ('{preview'}.css ({width: Math. round (rx * boundx) + 'px ', height: Math. round (ry * boundy) + 'px ', marginLeft:'-'+ Math. round (rx * c. x) + 'px ', marginTop:'-'+ Math. round (ry * c. y) + 'px '}) ;}{ var rx = 199/c. w; // The size var ry = 199/c.hsf-0000('{preview2'}.css ({width: Math. round (rx * boundx) + 'px ', height: Math. round (ry * boundy) + 'px ', marginLeft:'-'+ Math. round (rx * c. x) + 'px ', marginTop:'-'+ Math. round (ry * c. y) + 'px '}) ;}}; function updateCoords (c) {$ (' # x '). val (c. x); $ ('# y '). val (c. y); $ ('# W '). val (c. w); $ ('# H '). val (c. h) ;}}, 500 );}

Here are two tips:

First, do not forget to introduce the plug-in the page header: