Image upload Preview (contains size compression)

Previously developed a picture upload page. But because the main is used in, call mobile phone camera photos, photos are units of m, too consumption of traffic, so modify.

Originally used directly is the way to upload files, now instead of using canvas to draw, pass the photo base64 string.

The adjusted code:

Page HTML:

<inputtype= "File"Capture= "Camera"Accept= "image/*"name= "IMG1"ID= "IMG1"style= "display:block;height:100%;width:100%;" /><imgID= "Imgdata1"class= "Imgdata"style= "Display:inline-block"><CanvasID= "CANVAS1"style= "Display:none"></Canvas>

Input is used to click to take pictures or read image files

IMG for photo Previews

Canvas for drawing images

Input event Bindings:

$ ("#img1"). On (' Change ',function(event) {Event.preventdefault ();    varFile = $ ( This) [0].files[0]; varLdot = File.name.lastIndexOf (".")); varType = file.name.substring (Ldot + 1);    if(!type.match (/jpg|gif|png|bmp/i)) {            returnAlert ("The image you uploaded is not in the correct format, please re-select!") "); };       varIMG =NewImage (); IMG.SRC=_url.createobjecturl (file); Img.onload=function () {           varpicscale= This. width/this.height;/*picscale parameter is the original width * High, the image is drawn with the use of preventing image stretching deformation * /           varReader =NewFileReader ();             Reader.readasdataurl (file); Reader.onload=function(e) {Createcanvas ( This. result,picscale,1); }             }; }); 

To draw an image, preview the display:

functionCreatecanvas (Src,picscale,index) {/ * because I have two pictures on my page, I have added the index parameter to make a judgment * /varImageData; varCav; if(index==1) {ImageData=$ ("#imgdata1"); Cav= "CANVAS1"; }Else{ImageData=$ ("#imgdata2"); Cav= "CANVAS2"; }    /*Console.log (Picscale);*/    varCanvas =document.getElementById (CAV); varCXT = Canvas.getcontext (' 2d '); Canvas.width= 400*Picscale; Canvas.height= 400; varIMG =NewImage (); IMG.SRC=src; Img.onload=function() {Cxt.drawimage (IMG,0, 0,400*picscale,400);/*Canvas Drawing size display will stretch fixed height, width with height * scale*/imagedata.show (). attr (' Src ', canvas.todataurl ("Image/jpeg", 0.9));/*0.9 for mass compression scale range 0-1*/} } 

Image upload:

functionupload () {varURL = Yoururl; $.ajax ({url:url, type:"POST", data: {"ImgStr1": Canvas1.todataurl ("Image/jpeg", 0.9). Split (', ') [1],/* does not contain the head of the picture base64 String *  /"IMGSTR2": Canvas2.todataurl ("Image/jpeg", 0.9). Split (', ') [1]}, Beforesend:function() {Console.log (' Beforesend '); }, Success:function(Result) {if(Result! = "){                    varJsonobj =Jquery.parsejson (Result); if(Jsonobj.code = = ' 0 '){                        varSim = parsefloat (JsonObj.data.sim) *100; $("#simtext2"). Text (sim + "%")); }Else{alert (jsonobj.message); }} console.log (result);        } }); } 

Image upload Preview (contains size compression)