Web local image Canvas intercept upload

I made a Web local image canvas to intercept the uploaded demo. A few questions were found, recorded below:

1. the two concepts of the canvas element size (CSS width height) and surface size (canvas's own width height property) are different, and when two sizes are inconsistent, the coordinates need to be converted.

// where x, y is the viewport coordinates             function Windowtocanvas (canvas, x, y) {                var bbox = canvas.getboundingclientrect ();                 return {x: (x-bbox.left) * (canvas.width  / bbox.width),                    -bbox.top)  * (Canvas.height/ bbox.he ight)                };            }

2.Android Old nativeMobile browserBlob The constructor has bug (such as using or QQ browser, new Blob () throws an exception) My solution is to use base64 upload, service-side decoding. Because base64 size for the original 4/3 times, would naturally like to be able to like c language as the character unsigned js text+=11 will be converted to a string "1" text[i] is only readable, not modified!

varClearwidth, Clearheight; varimageloaded =false; varCutpoint = {x:0, y:0}; varGfilename = ""; document.getElementById (' Uploadbtn '). onclick =function(){                if(!imageloaded) {                    return; }                varOriginalcanvas = document.getElementById (' original ')); varCanvas = document.createelement (' Canvas '); varcontext = Canvas.getcontext (' 2d '); Canvas.width=Clearwidth; Canvas.height=Clearheight; Context.drawimage (Originalcanvas, Cutpoint.x, Cutpoint.y, Clearwidth, Clearheight,0, 0, Clearwidth, clearheight); //Note Todataurl Returns the default is PNG format                //data is Base64 encoded                vardata =Canvas.todataurl (); //the value of the second parameter, if between 0.0 and 1.0, is considered a picture quality parameter                //but I didn't test the size .                //var data = Canvas.todataurl (' image/png ', 0.5);                varEncodedata = Data.split (', ') [1]; //Solution Base64 Encoding                varDecodeddata =Window.atob (Encodedata); varIA =NewUint8array (decodeddata.length);  for(vari = 0; i < decodeddata.length; i++) {Ia[i]=decodeddata.charcodeat (i);                }; varblob; Try{                    //Todataurl Returns the default is PNG format, so this is fixed to image/pngBlob =NewBlob ([ia], {type: "Image/png"}); }Catch(e) {//using http://haomou.net/2016/01/14/2016_android_blob/still cannot be solved                    //Android Phone browser Blob constructor bug                    //My solution is to use the Base64 upload, the service side decoding//alert ("New Blob Exception:" + E);////TypeError old Chrome and FF//var blobbuilder = window. Blobbuilder | |//window. Webkitblobbuilder | |//window. Mozblobbuilder | |//window. Msblobbuilder;////alert ("Blobbuilder:" + typeof (Blobbuilder));//if (e.name = = ' TypeError ' && blobbuilder) {//var bb = new Blobbuilder ();//bb.append ([Ia.buffer]);//blob = Bb.getblob ("Image/png");//} else if (e.name = = "Invalidstateerror") {////Invalidstateerror (tested on FF13 WinXP)//blob = new BLOB ([Ia.buffer], {type: "Image/png"});//                    }//else{////We ' re screwed, blob constructor unsupported entirely//alert ("Blob constructor unsupported entirely");//return;//                    }                }                //modify file name suffix format                varfilename =Gfilename; varindex = Filename.lastindexof ('. ')); if(Index >= 0) {filename= filename.substring (0, index); FileName+ = ". png"; }                varFD =NewFormData (); if(BLOB) {Fd.append (' Image ', blob, filename); }Else{                    //Upload with base64Fd.append ("filename", filename); Fd.append ("Image", Encodedata); //since the base64 size is 4/3 times times the original, will naturally want to be able to be like C language                    //Treat the character directly as a unsigned char. JS is no good. Because                    //text + = 1, the number 1 will be converted to the string "1", while Text[i] is only readable, not                    //can be modified!                 }                //Send using Ajax$.ajax ({URL:"Http://192.168.3.102:8080/upload", type:"POST", DATA:FD, ProcessData:false,//tell jquery not to process the data sentContentType:false,//tell jquery not to set the Content-type request headerSuccessfunction() {Console.log ("Post success."); }, Error:function() {Console.log ("Post failed.");            }                }); }

Web local image Canvas intercept upload