Image compression and upload on HTML5 canvas mobile browser


Recently, when designing the avatar upload function on the mobile terminal, it was originally uploaded directly through formdata with < input type = “file” > but the actual usage is that too long upload time for too large pictures (photos taken by high-pixel mobile phones, etc.) will lead to upload failure, and uploading pictures of the original size every time (background processing compression) will greatly affect the user experience, Therefore, I studied the method of compressing and uploading pictures through canvas. Here are some ideas and experiences:

1、 < input type = “file” > get the local picture and draw the picture into the canvas. The difficulty here is that due to the protection mechanism of the browser, the image path to the local file cannot be obtained directly, so the local image needs to be compiled into Base64 format and then uploaded, the code is as follows:

JavaScript CodeCopy contents to clipboard
  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 doesn’t support it   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(“Make sure the file is of image type”);   
  15.     return false;   
  16.   }   
  17.   var reader = new FileReader();   
  18.   reader.readAsDataURL(file);   
  19.   reader.onload = function(e){   
  20.     //    this.result   Compiled image coding can be directly displayed in SRC  
  21.   }   
  22. }   

2、 Image processing in canvas

JavaScript CodeCopy contents to clipboard
  1. var c=document.getElementById(“/*   ID of canvas tag  */”);   
  2. var cxt=c.getContext(“2d”);   
  3. var img=new Image();   
  4. img.src=/*   Get the picture encoding address  */;   
  5. var width = img.width;   
  6. var height = img.height;   
  7. dic = height / width;   
  8. c.width = 200;  //The standard of image compression is calculated according to the fixed payment of 200px  
  9. c.height = 200 * dic;   
  10. cxt.clearRect(0,0,200,200*dic);   
  11. cxt.drawImage(img,0,0,200,200*dic);   
  12. var finalURL = c.toDataURL();     
  13. //    Finally get   finalURL   It is the compressed picture code, which can be used to upload or directly generate img tags  

Here are some points to note:

1. An error will be reported during local debugging. The reason is a cross domain problem, which needs to be debugged on the server;

2. The DrawImage () method in canvas has the function of image clipping, but if the image stretching and clipping are written at the same time, the clipping method will be executed first;

3. When uploading image coding using Ajax, the plus sign in the coding will be converted into a space, resulting in background compilation failure;

4. The method of selecting and uploading the image area is still in the trial stage, and the subsequent experience will be supplemented.

The above is the whole content of this article. I hope it will be helpful to your study.

Original text: