Canvas clip image and upload, front one step, no backend

Background:

There are two main ways to achieve the current mainstream picture tailoring.

1:flash operation clipping. 2: Cut with JS and DOM operations.

At present, it seems that the cut is mainly through the front-end upload image to the server, and then the front-end operation of some coordinates and size data to the backstage,

Then the background to perform the trimming. I have always felt that there are many problems:

1. You must upload the image to the server before you can perform the following actions

2. There is too much interaction between the front and back end, need several interactive data

The old way of realization is too low. I would like to try the canvas to achieve the cut, on the web search, there are some canvas tailoring, similar to jcrop this. But I found a lot of canvas plugins,

The essence still needs to be uploaded to the backstage, finally or back-end tailoring, the same way as before, just using canvas.

Implement your own front-end trim One step:

Then I thought about it. Canvas can store base64, and Base64 to the backend.

The general idea is this:

Form select picture

Read the image, use FileReader to obtain the original base64 code

New an image, pass the base64 to SRC, and then you can use this object

--Requires two canvases, a canvas is complete on the next layer, a canvas is the area we want to trim on top

(because canvas cannot be layered, two overlapping canvases, the lower canvas remains motionless, the upper layer shows the area we want to trim)

Black Transparent is the bottom of the original image, the arrow is pointing to the upper display area.

　　　　　　

The clipping area can be moved and enlarged, click Save will then use a canvas to draw the clipping area according to the original size, and finally the canvas object with Todataurl () to get the Base64 code, you can upload.

There are some technical points to realize:

1. You can customize the scale of the cropped picture and the smallest size, such as below, set the original width of the image must be greater than 640px, while the scale of the cut is always width:height, is currently 1:1

12	this._option.crop_min_width = 640;this._option.crop_min_height = 640;

2. You can customize the size of the cut container, for example, you just want it to be clipped in a small area, set this size, will be in the correct proportions, the original image is scaled in this container for user action

        This._option.crop_box_width = +;        This._option.crop_box_height = 200;

3. Implement the display area drag and display area size change.

4. You need to add the CSS3 attribute user-select:none to the clip container including the nodes inside. Otherwise, the dragged canvas bug will appear

1	-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none

　　

The code is very messy, the package is not good, but to achieve the desired function, click on save will show the cropped image according to the original ratio, the Base64 code obtained will be printed in the console.

The default is to select 640*640 above the picture, the following is the GIT address, pull down to try it, perhaps this program is a very good way.

GitHub Address Https://github.com/zimv/zmCanvasCrop

Canvas clip image and upload, front one step, no backend