H5 Canvas Picture upload operation

Recently wrote the small demo, using the H5 canvas to enlarge, move, trim, etc.
This is the most primitive code, more close to my ideas, subsequent to the format and structure of the optimization

Html:

1 <Prename= "Code"class= "brush:html;"rows= " the"cols= "+">2 <inputtype= "File"name=""Accept= "Image/gif, image/jpeg"ID= "Upload">3 <CanvasID= "Showimg"style= "border:1px solid #aaa;"></Canvas>4 <P>Move:</P>     5 <inputtype= "Range"min= "0"Max= "2"ID= "Move"Step= "0.01"value= "1"class= "Range-control"Oninput= "Translateall ()"/><BR/>6 <ButtonID= "Crop">Trim output</Button>7 <imgID= "img"src=""style= "border:1px solid #aaa;">

ls|

1 varIMG =NewImage ();2 varcan = document.getElementById (' showimg ');3 varCTX = Can.getcontext ("2d");4Can.width = 500;5Can.height = 400;6 varFictitious_imgwidth,fictitious_imgheight,flag;7 vardistance_x = 0;8 vardistance_y = 0;9 varOrign_x,orign_y//coordinates when the mouse clicksTen varPresent_x,present_y//record the coordinates of the picture to make the upper corner One varSubstitute_x,substitute_y//temporarily record the upper-left corner of the picture coordinates ACtx.fillstyle = "#aaa";  -Ctx.fillrect (0,0,500,400);  - Ctx.beginpath (); theCtx.moveto (100,100);  -Ctx.lineto (400,100); -Ctx.lineto (400,300); -Ctx.lineto (100,300);  +Ctx.lineto (100,100);  -Ctx.linewidth = 3; +Ctx.strokestyle = ' #333 ' A Ctx.stroke (); at Ctx.clip (); - Ctx.closepath (); -Ctx.clearrect (0, 0, Can.width, can.height);  -$ (' #upload '). Change (function(){ -Console.log (' This is runing ') -Ctx.clearrect (0, 0, Can.width, can.height);  in      -Img.onload =function(){ toFictitious_imgwidth =Img.width; +Fictitious_imgheight =Img.height; -present_x = can.width*0.5-img.width*0.5; thePresent_y = can.height*0.5-img.height*0.5; * ctx.drawimage (img,present_x,present_y,img.width,img.height); $     }Panax NotoginsengIMG.SRC = Getfileurl (' upload ')); -      the }) + functionTranslateall () { A     varval = document.getElementById ("Move"). Value; the reprint (Val) + } - functionReprint (scale) { $Ctx.clearrect (0, 0, Can.width, can.height); $Fictitious_imgwidth = img.width*Scale ; -Fictitious_imgheight = img.height*Scale ; - check_present (); the ctx.drawimage (img,present_x,present_y,fictitious_imgwidth,fictitious_imgheight) - }Wuyi functionGetfileurl (SourceID) { the     varURL; -     if(Navigator.userAgent.indexOf ("MSIE") >=1) {//IE WuURL =document.getElementById (SourceID). value; -}Else if(Navigator.userAgent.indexOf ("Firefox") >0) {//Firefox Abouturl = window. Url.createobjecturl (document.getElementById (SourceID). Files.item (0));  $}Else if(Navigator.userAgent.indexOf ("Chrome") >0) {//Chrome -url = window. Url.createobjecturl (document.getElementById (SourceID). Files.item (0));  -     } -     returnURL; A }  +$ (' #showimg '). MouseDown (function(e) { theConsole.log (' MouseDown is running ') -orign_x =E.offsetx; $Orign_y =e.offsety; the judgment_isinimg (e); the  the}). MouseMove (function(e) { the     if(flag) { -distance_x = E.offsetx-orign_x; indistance_y = e.offsety-orign_y; theCtx.clearrect (0, 0, Can.width, can.height);  thesubstitute_x = present_x +distance_x; Aboutsubstitute_y = present_y +distance_y; the ctx.drawimage (img,substitute_x,substitute_y,fictitious_imgwidth,fictitious_imgheight); the          the     } +}). MouseLeave (function(){ -Flag =false thepresent_x =substitute_x;BayiPresent_y =substitute_y; the}). MouseUp (function(){ theFlag =false -present_x =substitute_x; -Present_y =substitute_y; the }) the  the functionjudgment_isinimg (e) { the     varLL =present_x -     varlt =present_y the     varRL = present_x+Fictitious_imgwidth the     varRT = present_y+Fictitious_imgheight the     94  the     varx=event.clientx-Can.getboundingclientrect (). Left; the     vary=event.clienty-Can.getboundingclientrect (). Top; the 98     if(ll < x && x < RL && Lt < y && y <RT) { AboutFlag =true; -}Else{101Flag =false;102     }103 }104  the functioncheck_present () {106     if(typeofpresent_x = = ' undefined ' | |typeofpresent_y = = ' undefined '){107present_x = can.width*0.5-fictitious_imgwidth*0.5;108Present_y = can.height*0.5-fictitious_imgheight*0.5;109     } the }111  the$ (' #crop '). Click (function(){113Crop_canvas = document.createelement (' Canvas '); theCrop_canvas.width = 300;  theCrop_canvas.height = 200; theCrop_ctx =crop_canvas.getcontext (' 2d ')117Crop_ctx.fillstyle = "#fff";118Crop_ctx.fillrect (0,0,300,200);119 check_present (); -Crop_ctx.drawimage (Img,number (present_x) -100,number (present_y)-100, fictitious_imgwidth,fictitious_imgheight);121     varfullquality = Crop_canvas.todataurl (' Image/jpeg ', 1.0);122$ (' #img '). attr (' src '), fullquality);123})

H5 Canvas Picture upload operation