1 <pre name="code" class="brush: html;" rows="15" cols="300">2 <input type="file" name="" accept="image/gif, image/jpeg" id="upload">3 <canvas id="showimg" style="border:1px solid #aaa;"></canvas>4 <p>移动:</p>     5 <input type="range" min="0" max="2" id="move" step="0.01" value="1" class="range-control" oninput="translateall()"/><br/>6 <button id="crop">剪裁输出</button>7 <img id="img" src="" style="border:1px solid #aaa;">

  1 var img = new Image();  2 var can = document.getElementById(‘showimg‘);  3 var ctx = can.getContext("2d");  4 can.width = 500;  5 can.height = 400;  6 var fictitious_imgwidth,fictitious_imgheight,flag;  7 var distance_x = 0;  8 var distance_y = 0;  9 var orign_x,orign_y//鼠标点击时的坐标 10 var present_x,present_y//记录图片做上角的坐标 11 var substitute_x,substitute_y//暂时记录图片左上角坐标 12 ctx.fillStyle = "#aaa";    13 ctx.fillRect(0,0,500,400);  14 ctx.beginPath(); 15 ctx.moveTo(100,100);    16 ctx.lineTo(400,100); 17 ctx.lineTo(400,300); 18 ctx.lineTo(100,300);  19 ctx.lineTo(100,100);  20 ctx.lineWidth = 3; 21 ctx.strokeStyle = ‘#333‘ 22 ctx.stroke(); 23 ctx.clip(); 24 ctx.closePath(); 25 ctx.clearRect(0, 0, can.width, can.height);    26 $(‘#upload‘).change(function(){ 27     console.log(‘this is runing‘) 28     ctx.clearRect(0, 0, can.width, can.height);  29      30     img.onload = function(){ 31         fictitious_imgwidth = img.width; 32         fictitious_imgheight = img.height; 33         present_x = can.width*0.5-img.width*0.5; 34         present_y = can.height*0.5-img.height*0.5; 35         ctx.drawImage(img,present_x,present_y,img.width,img.height); 36     } 37     img.src = http://www.mamicode.com/getFileUrl(‘upload‘); 38      39 }) 40 function translateall(){ 41     var val = document.getElementById("move").value; 42     reprint(val) 43 } 44 function reprint(scale){ 45     ctx.clearRect(0, 0, can.width, can.height); 46     fictitious_imgwidth = img.width*scale; 47     fictitious_imgheight = img.height*scale; 48     check_present(); 49     ctx.drawImage(img,present_x,present_y,fictitious_imgwidth,fictitious_imgheight) 50 } 51 function getFileUrl(sourceId) {  52     var url;  53     if (navigator.userAgent.indexOf("MSIE")>=1) { // IE  54         url = document.getElementById(sourceId).value;  55     } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox  56         url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));  57     } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome  58         url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));  59     } 60     return url;  61 }  62 $(‘#showimg‘).mousedown(function(e){ 63     console.log(‘mousedown is running‘) 64     orign_x = e.offsetX; 65     orign_y = e.offsetY; 66     judgment_isinimg(e); 67  68 }).mousemove(function(e){ 69     if(flag){ 70         distance_x = e.offsetX - orign_x; 71         distance_y = e.offsetY - orign_y; 72         ctx.clearRect(0, 0, can.width, can.height);  73         substitute_x = present_x + distance_x; 74         substitute_y = present_y + distance_y; 75         ctx.drawImage(img,substitute_x,substitute_y,fictitious_imgwidth,fictitious_imgheight); 76          77     } 78 }).mouseleave(function(){ 79     flag = false 80     present_x = substitute_x; 81     present_y =substitute_y; 82 }).mouseup(function(){ 83     flag = false 84     present_x = substitute_x; 85     present_y =substitute_y; 86 }) 87  88 function judgment_isinimg(e){ 89     var ll = present_x 90     var lt = present_y 91     var rl = present_x+fictitious_imgwidth 92     var rt = present_y+fictitious_imgheight 93      94  95     var x=event.clientX-can.getBoundingClientRect().left; 96     var y=event.clientY-can.getBoundingClientRect().top; 97  98     if(ll < x && x < rl && lt < y && y < rt){ 99         flag = true;100     }else{101         flag = false;102     }103 }104 105 function check_present(){106     if(typeof present_x == ‘undefined‘ || typeof present_y == ‘undefined‘){107         present_x = can.width*0.5-fictitious_imgwidth*0.5;108         present_y = can.height*0.5-fictitious_imgheight*0.5;109     }110 }111 112 $(‘#crop‘).click(function(){113     crop_canvas = document.createElement(‘canvas‘);114     crop_canvas.width = 300;  115     crop_canvas.height = 200;116     crop_ctx =crop_canvas.getContext(‘2d‘)117     crop_ctx.fillStyle = "#fff";118     crop_ctx.fillRect(0,0,300,200);119     check_present();120     crop_ctx.drawImage(img,Number(present_x)-100,Number(present_y)-100,fictitious_imgwidth,fictitious_imgheight);121     var fullQuality = crop_canvas.toDataURL(‘image/jpeg‘, 1.0);122     $(‘#img‘).attr(‘src‘,fullQuality);123 })