The html5 canvas mobile browser compresses and uploads images,

The html5 canvas mobile browser compresses and uploads images,

Recently, when I designed the Avatar upload function on the Mobile End, I used <input type = "file"> to upload images directly through formData. However, the actual usage is as follows: if the upload time of an excessively large image (such as a photo taken by a high-pixel mobile phone) is too long, the upload will fail, and each time the original size image is uploaded (the background is compressed), the user experience will be greatly affected, so I studied how to compress and upload images through canvas. The following are some ideas and experiences:

1. <input type = "file"> obtain the local image and draw the image into the canvas. The difficulty here is that, due to the browser's protection mechanism, you cannot directly obtain the image path of the local file. Therefore, you need to compile the local image into base64 format for upload.The Code is as follows:

Copy the content to the clipboard using JavaScript Code

1. Var result = document. getElementById ("/* error message display block */");
2. Var input = document. getElementById ("/* Upload File tag */");
4. If (typeof FileReader === 'undefined '){
5. Result. innerHTML = "<p class = 'warn'> sorry, your browser does not support FileReader </p> ";
6. Input. setAttribute ('Disabled ', 'Disabled ');
7. } Else {
8. Input. addEventListener ('change', readFile, false );
9. }
11. Function readFile (){
12. Var file = this. files [0];
13. If (! /Image \/\ w +/. test (file. type )){
14. Alert ("Please make sure the file is of the image type ");
15. Return false;
16. }
17. Var reader = new FileReader ();
18. Reader. readAsDataURL (file );
19. Reader. onload = function (e ){
20. // This. result: The compiled Image Code, which can be directly displayed using src.
21. }
22. }

2. Image Processing in canvas

Copy the content to the clipboard using JavaScript Code

1. Var c = document. getElementById ("/* canvas tag id */");
2. Var cxt = c. getContext ("2d ");
3. Var img = new Image ();
4. Img. src =/* obtain the image encoding address */;
5. Var width = img. width;
6. Var height = img. height;
7. Dic = height/width;
8. C. width = 200; // the image compression standard, which is calculated based on the fixed PX
9. C. height = 200 * dic;
10. Cxt. clearRect (200,200, * dic );
11. Cxt. drawImage (img, 200,200, * dic );
12. Var finalURL = c. toDataURL ();
13. // The finalURL is the compressed image encoding, which can be used to upload or directly generate an img tag.

Note the following points:

1. An error is reported during local debugging because of a cross-origin problem. You need to debug the problem on the server;

2. The drawImage () method in the canvas provides the image cropping function. However, if you write image stretching and cropping at the same time, the cropping method is prioritized;

3. When Using AJAX to upload image encoding, the plus sign in the encoding will be converted to a space for uploading, leading to background compilation failure;

4. The method for uploading images in the image area is still in the trial phase and will be supplemented later.

The above is all the content of this article, hoping to help you learn.

Original article: http://www.cnblogs.com/liaojh/p/5209433.html