html5 canvas头像裁剪上传
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html5 canvas头像裁剪上传，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10682字，纯文字阅读大概需要16分钟。
内容图文
效果：
在博客里有另一篇头像裁剪是用actionscript实现的头像裁剪上传，这里拥护html5,用canvas实现下。前两次的右键是为了说明不是用flash做的。
如果想要更严谨的，有技术支持的这个东西的话，可以用kissy的http://gallery.kissyui.com/imgcrop/2.0/guide/index.html.
原理很简单：裁剪框是用html做的，canvas的作用在于每次移动，变形后根据裁剪框的位置坐标以及大小，绘制图像的部分并缩放，还有绘制裁剪框区域外的灰色区域，优点也一样是不用把数据传到服务器，用服务器裁剪生成图片。
html
1
<
div
id
="avatar_crop"
class
=‘inline-block‘
>
2
<
div
id
=‘wrap_crop_canvas‘
class
=‘vertical_fix_parent‘
>
3
<
canvas
id
="crop_canvas"
height
=‘500‘
width
=‘500‘
></
canvas
>
4
</
div
>
5
<
div
id
="crop_handler"
>
6
<
p
id
=‘move_proxy‘
></
p
>
7
<
div
id
="dragLeftTop"
></
div
>
8
<
div
id
="dragLeftBot"
></
div
>
9
<
div
id
="dragRightTop"
></
div
>
10
<
div
id
="dragRightBot"
></
div
>
11
<
div
id
="dragTopCenter"
></
div
>
12
<
div
id
="dragBotCenter"
></
div
>
13
<
div
id
="dragRightCenter"
></
div
>
14
<
div
id
="dragLeftCenter"
></
div
>
15
</
div
>
16
</
div
>
17
<
canvas
id
="crop_preview"
width
="105"
height
="100"
18
class
=‘inline-block‘
></
canvas
>
css
1
#avatar_crop,#load_img {
2 position: relative;
3 }
4 5#avatar_crop {
6 border: 1px solid red;
7 }
8 9#crop_preview {
10 border: 1px solid blue;
11 }
12 13#myinfo>.inline-block {
14 vertical-align: top;
15 }
16 17#crop_handler {
18 display: none;
19 }
20 21#crop_handler {
22 height: 150px;
23 width: 150px;
24 position: absolute;
25 left: 0px;
26 border: 1px solid black;
27 }
28 29#crop_control input {
30 position: absolute;
31 right: 0;
32 top: 0;
33 opacity: 0;
34 width: 100%;
35 height: 100%;
36 }
37 38#crop_handler>div {
39 position: absolute;
40 width: 4px;
41 height: 4px;
42 border: 1px solid #000;
43 background: white;
44 overflow: hidden;
45 }
46 47#dragLeftTop {
48 left: -3px;
49 top: -3px;
50 cursor: nw-resize;
51 }
52 53#dragLeftBot {
54 left: -3px;
55 bottom: -3px;
56 cursor: sw-resize;
57 }
58 59#dragRightTop {
60 right: -3px;
61 top: -3px;
62 cursor: ne-resize;
63 }
64 65#dragRightBot {
66 right: -3px;
67 bottom: -3px;
68 cursor: se-resize;
69 }
70 71#dragTopCenter {
72 top: -3px;
73 left: 50%;
74 margin-left: -3px;
75 cursor: n-resize;
76 }
77 78#dragBotCenter {
79 bottom: -3px;
80 left: 50%;
81 margin-left: -3px;
82 cursor: s-resize;
83 }
84 85#dragRightCenter {
86 right: -3px;
87 top: 50%;
88 margin-top: -3px;
89 cursor: e-resize;
90 }
91 92#dragLeftCenter {
93 left: -3px;
94 top: 50%;
95 margin-top: -3px;
96 cursor: w-resize;
97 }
98 99#move_proxy {
100 height: 100%;
101 cursor: move;
102 }
103104#wrap_crop_canvas {
105 height: 500px;
106 width: 500px;
107 border: 1px solid yellow;
108 }
js
1 require(["avalon-min"], function(avalon) {
2var context = $("crop_canvas").getContext("2d"),img_source;
3function getBoundary(container, target) {
4var borderTopWidth = 0, borderRightWidth = 0, borderBottomWidth = 0, borderLeftWidth = 0, cOffset = container
5 .offset(), cOffsetTop = cOffset.top, cOffsetLeft = cOffset.left, tOffset = target
6 .offset();
7 borderTopWidth = parseFloat(avalon.css(container,‘borderTopWidth‘));
8 borderRightWidth = parseFloat(avalon.css(container,‘borderRightWidth‘));
9 borderBottomWidth = parseFloat(avalon.css(container,‘borderBottomWidth‘));
10 borderLeftWidth = parseFloat(avalon.css(container,‘borderLeftWidth‘));
11 cOffsetTop = cOffsetTop - tOffset.top + parseFloat(avalon.css(target,‘top‘));
12 cOffsetLeft = cOffsetLeft - tOffset.left + parseFloat(avalon.css(target,‘left‘));
13return {
14 top : cOffsetTop + borderTopWidth,
15 right : cOffsetLeft + container.width() - target.width()- borderRightWidth,
16 left : cOffsetLeft + borderLeftWidth,
17 bottom : cOffsetTop + container.height() - target.height()
18 - borderBottomWidth
19 };
20 }
21var clearSelect = ‘getSelection‘ in window ? function(){
22 window.getSelection().removeAllRanges();
23 } : function(){
24try{
25 document.selection.empty();
26 }
27catch( e ){};
28 };
29var file=null;
30 avalon.bind($(‘load_img‘),‘change‘,function(e){
31var reader = new FileReader(),files = e.target.files;
32 reader.onload = (function() {
33returnfunction(e) {
34var image = new Image();
35 image.onload = function() {
36if(image.width>500||image.height>500){
37var prop=Math.min(500/image.width,500/image.height);
38 $(‘crop_canvas‘).width=image.width=image.width*prop;
39 $(‘crop_canvas‘).height=image.height=image.height*prop;
40 }
41 $(‘crop_handler‘).style.top=(500-$(‘crop_canvas‘).height)/2+‘px‘;
42 context.drawImage(image, 0, 0,image.width, image.height);
43 $(‘crop_handler‘).style.display=‘block‘;
44 img_source=image;
45 init_events();
46 };
47 image.src = e.target.result;
48 };
49 })();
50 file=files[0];
51 reader.readAsDataURL(files[0]);
52 });
53function init_crop_drag(target,kind){
54var _params = {
55 left : 0,
56 top : 0,
57 width : 0,
58 height : 0,
59 currentX : 0,
60 currentY : 0
61 };
62var wrap_width=$(‘crop_canvas‘).width,wrap_height=$(‘crop_canvas‘).height;
63 avalon.bind($(target),‘mousedown‘,function(e){
64 _params.currentX = e.clientX;
65 _params.currentY = e.clientY;
66var p=avalon(e.target.parentNode),c=avalon($(‘avatar_crop‘)).offset(),a=$(‘crop_handler‘).style.top;
67 _params.width=p.width();
68 _params.height=p.height();
69 _params.top=p.offset().top-c.top;
70 _params.left= p.offset().left-c.left;
71 avalon.bind(document,‘mousemove‘,move_handler);
72 e.stopPropagation();
73 });
74 avalon.bind(document,‘mouseup‘,function(e){
75 avalon.unbind(document,‘mousemove‘,move_handler);
76 screen_shot();
77 });
78 avalon.bind($(‘save_crop‘),‘click‘,function(){
79var canvas = $("crop_preview");
80var imgValue = canvas.toDataURL();
81 imgValue = imgValue.substr(22);
82 avalon.ajax({
83 url : ‘upload1.php‘,
84 type : ‘POST‘,
85 data : {
86 imgData : imgValue,
87 file_name : escape(file.name)
88 },
89 dataType : ‘text‘,
90 success : function(data) {
91 alert("s");
92 }
93 });
94 });
95var screen_shot= function() {
96var c =$(‘crop_preview‘);
97var ctx = c.getContext("2d");
98var left = avalon($(‘crop_handler‘)).offset().left-avalon($(‘crop_canvas‘)).offset().left;
99var top = avalon($(‘crop_handler‘)).offset().top-avalon($(‘crop_canvas‘)).offset().top;
100var width =avalon($(‘crop_handler‘)).width();
101var height =avalon($(‘crop_handler‘)).height();
102 console.log(left, top, width, height);
103 ctx.clearRect(0, 0,wrap_width,wrap_height);
104 ctx.drawImage($(‘crop_canvas‘),left,top,width,height, 0, 0, 105, 100);
105 };
106function move_handler(e) {
107 clearSelect();
108var a=avalon($(‘crop_canvas‘)).offset();
109var canvasTop=(500-wrap_height)/2;
110var canvasLeft=(500-wrap_width)/2;
111var nowX = e.clientX, nowY = e.clientY;
112var disX = nowX - _params.currentX, disY = nowY - _params.currentY;
113var c_h=avalon($("avatar_crop")).height(),c_w=avalon($("avatar_crop")).width();
114var x=parseInt(_params.left) + disX,y=parseInt(_params.top) + disY,handler_y=avalon($(‘crop_handler‘)).offset().top,handler_x=avalon($(‘crop_handler‘)).offset().left,
115 handler_width=avalon($(‘crop_handler‘)).width(),handler_height=avalon($(‘crop_handler‘)).height();
116var can_move_top=y>canvasTop,can_move_left=x>canvasLeft,can_move_right=x<c_w-_params.width-canvasLeft,can_move_bottom=y<c_h-_params.height-canvasTop;
117if (kind === "n") {
118if(can_move_top){
119 $("crop_handler").style.top = parseInt(_params.top) + disY
120 + "px";
121 $("crop_handler").style.height = parseInt(_params.height)
122 - disY + "px";
123 }
124 } elseif (kind === "w") {
125if(can_move_left){
126 $("crop_handler").style.left = parseInt(_params.left) + disX
127 + "px";
128 $("crop_handler").style.width = parseInt(_params.width) - disX
129 + "px";
130 }
131 } elseif (kind === "e") {
132if(can_move_right){
133 $("crop_handler").style.width = parseInt(_params.width) + disX
134 + "px";
135 }
136 } elseif (kind === "s") {
137if(can_move_bottom){
138 $("crop_handler").style.height = parseInt(_params.height)
139 + disY + "px";
140 }
141 } elseif (kind === "nw") {
142if(can_move_top&&can_move_left){
143 $("crop_handler").style.left = parseInt(_params.left) + disX
144 + "px";
145 $("crop_handler").style.width = parseInt(_params.width) - disX
146 + "px";
147 $("crop_handler").style.top = parseInt(_params.top) + disY
148 + "px";
149 $("crop_handler").style.height = parseInt(_params.height)
150 - disY + "px";
151 }
152 } elseif (kind === "ne") {
153if(can_move_top&&can_move_right){
154 $("crop_handler").style.top = parseInt(_params.top) + disY
155 + "px";
156 $("crop_handler").style.height = parseInt(_params.height)
157 - disY + "px";
158 $("crop_handler").style.width = parseInt(_params.width) + disX
159 + "px";
160 }
161 } elseif (kind === "sw") {
162if(can_move_bottom&&can_move_left){
163 $("crop_handler").style.left = parseInt(_params.left) + disX
164 + "px";
165 $("crop_handler").style.width = parseInt(_params.width) - disX
166 + "px";
167 $("crop_handler").style.height = parseInt(_params.height)
168 + disY + "px";
169 }
170 } elseif (kind === "se") {
171if(can_move_bottom&&can_move_right){
172 $("crop_handler").style.width = parseInt(_params.width) + disX
173 + "px";
174 $("crop_handler").style.height = parseInt(_params.height)
175 + disY + "px";
176 }
177 }
178elseif (kind === "drag"){
179if(can_move_top&&can_move_right&&can_move_bottom&&can_move_left){
180 $("crop_handler").style.left =x+ "px";
181 $("crop_handler").style.top = y+ "px";
182 }
183 }
184 context.clearRect(0,0,$(‘crop_canvas‘).width,$(‘crop_canvas‘).height);
185 context.drawImage(img_source, 0, 0,img_source.width,img_source.height);
186 context.fillStyle="#1A2013";
187 context.globalAlpha=0.5;
188 context.fillRect(0, 0, wrap_width,handler_y-a.top);
189 context.fillRect(0,handler_y-a.top,handler_x-a.left,wrap_height-handler_y+a.top);
190 context.fillRect(handler_x-a.left,handler_y-a.top+handler_height,wrap_width-handler_x+a.left,wrap_height-handler_y+a.top-handler_height);
191 context.fillRect(handler_x-a.left+handler_width,handler_y-a.top,wrap_width-handler_x+a.left-handler_width,handler_height);
192 context.globalAlpha=1;
193 e.stopPropagation();
194 }
195 }
196function init_events(){
197 init_crop_drag("crop_handler","drag");
198 init_crop_drag("dragTopCenter","n");
199 init_crop_drag("dragLeftTop","nw");
200 init_crop_drag("dragLeftBot","sw");
201 init_crop_drag("dragRightTop", "ne");
202 init_crop_drag("dragRightBot", "se");
203 init_crop_drag("dragBotCenter", "s");
204 init_crop_drag("dragRightCenter","e");
205 init_crop_drag("dragLeftCenter","w");
206 }
207 });
avalon是司徒正美https://github.com/RubyLouvre/avalon的轻量mvvc，很强大！
原文：http://www.cnblogs.com/TheViper/p/4068840.html
内容总结
以上是互联网集市为您收集整理的html5 canvas头像裁剪上传全部内容，希望文章能够帮你解决html5 canvas头像裁剪上传所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】