Canvas application-Compression upload of images (for mobile browsers only)

Recently in the mobile design avatar upload function, originally was to <input type= "file" > directly through the Formdata upload, but the actual use is: for oversized pictures (high-resolution photos taken by mobile phones, etc.) too long will cause the upload failed, And each time upload the original size of the picture (background processing compression) very affect the user experience, so the study of the canvas to compress pictures and upload methods, the following are some of the ideas and experience to organize:

<input type= "File" > get the local picture and draw the picture into the canvas. The difficulty here is: because of the browser protection mechanism, can not directly get to the local file picture path, so you need to compile the local picture into base64 format and then upload, the code is as follows:

varresult = document.getElementById ("/* error message display block */");varinput = document.getElementById ("/* Upload file Label */");if(typeofFileReader = = = ' undefined ') {result.innerhtml= "<p class= ' warn ' > Sorry, your browser does not support filereader</p>"; Input.setattribute (' Disabled ', ' disabled ');}Else{Input.addeventlistener (' Change ', ReadFile,false);}functionReadFile () {varFile = This. files[0]; if(!/image\/\w+/. Test (File.type)) {Alert ("Make sure the file is an image type"); return false; }  varReader =NewFileReader ();  Reader.readasdataurl (file); Reader.onload=function(e) {//This.result compiled image encoding, which can be displayed directly with SRC  }}

Second, the image in the canvas processing

varC=document.getelementbyid ("/* the ID of the canvas tag */");varCxt=c.getcontext ("2d");varimg=NewImage (); IMG.SRC=/*Get the image encoding address*/;varwidth =Img.width;varHeight =Img.height;dic= height/Width;c.width= 200;//image compression Standard, here is calculated according to the set of 200pxC.height = 200 *Dic;cxt.clearrect (0,0,200,200*dic); Cxt.drawimage (IMG,0,0,200,200*dic);varFinalURL =C.todataurl (); //The resulting finalurl is the compressed image encoding that can be used to upload or directly generate an IMG tag

The points to note here are:

1, the local debugging will have an error, the reason for cross-domain problems, need to re-server debugging;

2, the DrawImage () method in the canvas has the image clipping function, but the image stretching and clipping are written at the same time, will give priority to the method of clipping;

3, using the Ajax upload image encoding, the plus sign in the code will be converted to a space upload causes background compilation failure;

4, about the image selection method is still in the trial stage, the follow-up will complement the experience.

Canvas application-Compression upload of images (for mobile browsers only)