H5 mobile image cropping (base64 ),

H5 mobile image cropping (base64 ),

During mobile development, you may encounter image cropping problems. Of course, no matter what method you want to solve the problem, you have to solve it, even if it is ugly or ugly.

There are many jquery plug-ins for image cropping, And I have tested a lot. However, most of them support pc-side image cropping, but few support mobile-side image cropping, it may be even less smooth.

As a newbie, I tried a lot of solutions. At the beginning, I tried to write a jquery plug-in to support touch-screen events. I wrote it, but I felt embarrassed to come up with it, let alone commercial use.

I tried to find some plug-ins one by one. In the end, the jquery plug-in, cropper, was created.

It seems quite simple.

The following is some of the code used in the process. I hope it will help you.

Plugin import:

<link rel="stylesheet" href="../../../css/delimg/cropper.css"/><script src="../../../js/libs/jquery.min.js"></script><script src="../../../js/delimg/cropper.js"></script>

Some necessary html code:

<div class="img-container">    </div>

Note: Normally, images are dynamically generated, so the current src value is blank. It is easier to take a static image for image capturing. You can see the following code.

Use of plug-ins (simple ):

Var $ image = $ ('. img-container> img '); $ image. attr ("src", imgurl); $ image. on ("load", function () {// crop the image only after the image is loaded successfully $ image. cropper ({aspectRatio: 1/1 // ratio for cropping, which can be any ratio and adjusted by yourself });})

Now we only have a framework. The most important thing is the following code. Retrieving image data is the most important. Therefore, we need to use the canvas's special functions, convert the cropped image to a base64 string for interaction between the front and back ends.

However, cropper does not provide you with a ready-made base64 string, but it gives you a string of Data Objects for you to play freely.

When you click a button, make sure to crop this bright part:

$ (Selector ). on ("tap", function () {var src = $ image. eq (0 ). attr ("src"); var canvasdata = $ image. cropper ("getCanvasData"); var cropBoxData = $ image. cropper ('getcropboxdata'); convertToData (src, canvasdata, cropBoxData, function (basechar) {// function processing after callback });})

Of course, this is not the focus. The focus is on the following function processing.

Function convertToData (url, canvasdata, cropdata, callback) {var cropw = cropdata. width; // The width of the cut var croph = cropdata. height; // cut width var imgw = canvasdata. width; // scale the image or zoom in the height var imgh = canvasdata. height; // scale the image or zoom in the height var poleft = canvasdata. left-cropdata. left; // specifies the left position of the image on the canvas. var potop = canvasdata. top-cropdata. top; // The upper position of the canvas to locate the image. var canvas = document. createElement ("canvas"); var ctx = canvas. getContext ('2d '); canvas. width = cropw; canvas. height = croph; var img = new Image (); img. src = url; img. onload = function () {this. width = imgw; this. height = imgh; // The Relationship Between canvas and image cropping is understood here. ctx. drawImage (this, poleft, potop, this. width, this. height); var base64 = canvas. toDataURL ('image/jpg ', 1); // here "1" refers to processing the image definition (0-1). Of course, the smaller the image, the blurrier the image, the smaller the image size after processing, callback & callback (base64) // callback base64 string }}

Okay, now we can process all the processing items. Of course, here is a forward processing tailoring for amplification and reduction. If you need to rotate images and other column operations, yes, too. Here is just to show you the implementation of a simple demo. If it is useful, it can be used as a reference.