Web local image Canvas intercept upload

Source: Internet
Author: User
Tags unsupported

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.