html:
1 <pre rows="15" cols="300"> 2 <input type="file" accept="image/gif, image/jpeg"> 3 <canvas></canvas> 4 <p>移动:</p> 5 <input type="range" min="0" max="2" step="0.01" value="http://www.cnblogs.com/huangwentian/p/1" oninput="translateall()"/><br/> 6 <button>剪裁输出</button> 7 <img src="">
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 = (‘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来对图片进行放大,移动,剪裁等等
这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化
Tags：jsp
相关文章
精彩导读
热门资讯
关注我们
