h5 canvas 图片上传操作

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

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