h5 canvas 图片上传操作

Posted 2020-09-24 Grewer

最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等
这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化

html:

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;">

 

 

js:

  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 = 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 })