发表于 |

在做手机端网页时，如果没有做横竖屏自适应，那么横竖屏监测是个很好的用户体验@#￥%……%*&……%代码：

1
2
3
4
5
6
7
8
var updateOrientation = function(){
	if(window.orientation == '-90' || window.orientation == '90'){
		alert("请将手机竖屏");
	}else{
		 alert("现在是竖屏");
	}
}
window.onorientationchange = updateOrientation;

发表于 |

animation有三个事件，在入场动画执行完想换成另一个循环动画时，用webkitAnimationEnd 事件:

1
2
3
4
$(document).on("webkitAnimationEnd", ".p34", function(){
    $(".p34").removeClass('入场动画类')；
    $(".p34").addClass('循环动画类')
})

拓展：animation共有3个事件：可在需要时使用
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd
transition仅仅有这一个事件

发表于 |

首先在html中图片要用img标签，div的background在这里不适用，接着就是加载img图片，根据图片加载状态来计算百分比：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var jiazai = 0;
var imgs = document.getElementsByTagName("img");
var imgLen = imgs.length;
for(var i = 0; i < imgLen; i++){
    if(imgs[i].complete){    //如果缓存里有这张图片，就是触发complete
        jiazai++;
        var baifenbi = Math.floor(jiazai/imgLen*100);
        setBaiNum(baifenbi);
        continue;
    }
    imgs[i].onload = function(){    //图片加载
        jiazai++;
        var baifenbi = Math.floor(jiazai/imgLen*100);
        setBaiNum(baifenbi);        
    }
}
function setBaiNum(bai){
    $("#baifen_txt").text(bai);   //设置百分数到DOM上
    if(bai == 100){		//图片加载完毕
        setTimeout(function(){
          //  显示视图;
        }, 1000);
        
    }
}

发表于 |

手机端H5中，实现仿手势解锁，用户按照图标滑出某个图形，即可解锁，效果可见链接
其原理就是：把手势图片分成很多碎段，在touchmove中监听每个触摸坐标是否击中分段图片的开始结尾坐标，如果击中结尾坐标，即把那一段图片显示出来，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
<html class="hb-loaded ks-webkit537 ks-webkit ks-chrome39 ks-chrome">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta charset="gb2312">
<title></title>
<meta name="format-detection" content="telephone=yes">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,iframe,section{margin:0;padding:0;}
body{font-family:"microsoft yahei";-webkit-text-size-adjust:none;color:#333333;
background:#1f3693 url(http://hubei.sinaimg.cn/ltzt/2014/2014wbzy/zzth5/bg.jpg) no-repeat center top; background-size:cover;}
html{width:100%; height:100%;}
.startpage{width:100%;height:100%;}
.startpage .cont{width:100%;position:relative;}
.startpage .cont .atmain{width:189px;height:188px;position:absolute;top:65%;left:50%;margin:-94px 0 0 -94px;background:url(http://hubei.sinaimg.cn/ltzt/2014/2014wbzy/zzth5/line_18.png);opacity:0;}
.startpage .cont .atmain .atcont{width:189px;height:188px;position:relative;}
.startpage .cont .atmain .atcont .bigxx{width:60px;height:50px;position:absolute;z-index:5;background:url('http://hubei.sinaimg.cn/ltzt/2014/2014wbzy/zzth5/linexx1.png');
transform:scale(1.5,1.5);
-ms-transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
}
.startpage .cont .atmain .atcont .bigxx1{left:89px;top:63px;z-index:5;}

.startpage .cont .atmain .atcont .sxx{width:42px;height:36px;position:absolute;background:url(http://hubei.sinaimg.cn/ltzt/2014/2014wbzy/zzth5/linexxx.png);z-index:5;}
.startpage .cont .atmain .atcont .sxx1{left:63px;top:35px;}
.startpage .cont .atmain .atcont .sxx2{left:35px;top:65px;}
.startpage .cont .atmain .atcont .sxx3{left:42px;top:109px;}
.startpage .cont .atmain .atcont .sxx4{left:85px;top:107px;}
.startpage .cont .atmain .atcont .sxx5{left:136px;top:97px;}
.startpage .cont .atmain .atcont .sxx6{left:136px;top:33px;}
.startpage .cont .atmain .atcont .sxx7{left:79px;top:0px;}
.startpage .cont .atmain .atcont .sxx8{left:17px;top:26px;}
.startpage .cont .atmain .atcont .sxx9{left:-1px;top:89px;}
.startpage .cont .atmain .atcont .sxx10{left:35px;top:143px;}
.startpage .cont .atmain .atcont .sxx11{left:97px;top:152px;}
.startpage .cont .atmain .atcont .sxx12{left:147px;top:131px;}

.startpage .cont .atmain .atcont .atline{position:absolute;z-index:3;display:none;}
.startpage .cont .atmain .atcont .line1{width:60px;height:54px;left:76px;top:33px;}
.startpage .cont .atmain .atcont .line2{width:46px;height:48px;left:33px;top:38px;}
.startpage .cont .atmain .atcont .line3{width:46px;height:46px;left:31px;top:83px;}
.startpage .cont .atmain .atcont .line4{width:70px;height:27px;left:33px;top:123px;}
.startpage .cont .atmain .atcont .line5{width:60px;height:40px;left:75px;top:88px;}
.startpage .cont .atmain .atcont .line6{width:67px;height:40px;left:100px;top:115px;}
.startpage .cont .atmain .atcont .line7{width:44px;height:64px;left:138px;top:54px;}
.startpage .cont .atmain .atcont .line8{width:92px;height:50px;left:89px;top:0px;}
.startpage .cont .atmain .atcont .line9{width:76px;height:42px;left:19px;top:0px;}
.startpage .cont .atmain .atcont .line10{width:54px;height:64px;left:0px;top:42px;}
.startpage .cont .atmain .atcont .line11{width:54px;height:70px;left:0px;top:105px;}
.startpage .cont .atmain .atcont .line12{width:56px;height:36px;left:55px;top:152px;}
.startpage .cont .atmain .atcont .line13{width:70px;height:60px;left:113px;top:127px;}

@keyframes wzout
{
0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes wzout 
{
0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes wzout 
{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes wzout
{
0%{opacity:0;}
100%{opacity:1;}
}

@keyframes xxsf
{
0%{
transform:scale(1,1);
-ms-transform:scale(1,1);
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);}
100%{transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);}
}
@-ms-keyframes xxsf 
{
0%{
transform:scale(1,1);
-ms-transform:scale(1,1);
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);}
100%{transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);}
}
@-moz-keyframes xxsf 
{
0%{
transform:scale(1,1);
-ms-transform:scale(1,1);
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);}
100%{transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);}
}
@-webkit-keyframes xxsf 
{
0%{
transform:scale(1,1);
-ms-transform:scale(1,1);
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);}
100%{transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);}
}

@keyframes xxsf1
{
0%{
transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-webkit-transform:scale(1.2,1.2);}
100%{transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);}
}
@-ms-keyframes xxsf1 
{
0%{
transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-webkit-transform:scale(1.2,1.2);}
100%{transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);}
}
@-moz-keyframes xxsf1 
{
0%{
transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-webkit-transform:scale(1.2,1.2);}
100%{transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);}
}
@-webkit-keyframes xxsf1 
{
0%{
transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-webkit-transform:scale(1.2,1.2);}
100%{transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);}
}

.startpage .cont .atmain .ainm .xxact{
animation:xxsf 1s linear 0s infinite alternate;
-ms-animation:xxsf 1s linear 0s infinite alternate;
-moz-animation:xxsf 1s linear 0s infinite alternate;
-webkit-animation:xxsf 1s linear 0s infinite alternate;
}
.startpage .cont .atmain .ainm .xxact1{
animation:xxsf 1s linear 1s infinite alternate;
-ms-animation:xxsf 1s linear 1s infinite alternate;
-moz-animation:xxsf 1s linear 1s infinite alternate;
-webkit-animation:xxsf 1s linear 1s infinite alternate;
}

.startpage .cont .atmain .ainm .xxact3{
animation:xxsf1 .3s linear 0s infinite alternate;
-ms-animation:xxsf1 .3s linear 0s infinite alternate;
-moz-animation:xxsf1 .3s linear 0s infinite alternate;
-webkit-animation:xxsf1 .3s linear 0s infinite alternate;
}


.startpage .cont .p2act1{
animation:wzout .8s ease-out 1s 1 forwards;
-ms-animation:wzout .8s ease-out 1s 1 forwards;
-moz-animation:wzout .8s ease-out 1s 1 forwards;
-webkit-animation:wzout .8s ease-out 1s 1 forwards;
}

</style>
</head>
<body><!-- SUDA_CODE_START --> 
  
<!-- SUDA_CODE_END -->

<div class="startpage">
  <div class="cont" style="height: 736px;">    
	<div class="atmain p2act1" id="atcont">
	  <div class="atcont ainm">
	    <p class="bigxx bigxx1 point xxact3"></p>
		<p class="sxx sxx1 point xxact"></p>
		<p class="sxx sxx2 point xxact1"></p>
		<p class="sxx sxx3 point xxact"></p>
		<p class="sxx sxx4 point xxact1"></p>
		<p class="sxx sxx5 point xxact"></p>
		<p class="sxx sxx6 point xxact1"></p>
		<p class="sxx sxx7 point xxact"></p>
		<p class="sxx sxx8 point xxact1"></p>
		<p class="sxx sxx9 point xxact"></p>
		<p class="sxx sxx10 point xxact1"></p>
		<p class="sxx sxx11 point xxact"></p>
		<p class="sxx sxx12 point xxact1"></p>

		<p class="atline line1"><img src="img/line1.png"></p>
		<p class="atline line2"><img src="img/line2.png"></p>
		<p class="atline line3"><img src="img/line3.png"></p>
		<p class="atline line4"><img src="img/line4.png"></p>
		<p class="atline line5"><img src="img/line5.png"></p>
		<p class="atline line6"><img src="img/line6.png"></p>
		<p class="atline line7"><img src="img/line7.png"></p>
		<p class="atline line8"><img src="img/line8.png"></p>
        <p class="atline line9"><img src="img/line9.png"></p>
		<p class="atline line10"><img src="img/line10.png"></p>
		<p class="atline line11"><img src="img/line11.png"></p>
		<p class="atline line12"><img src="img/line12.png"></p>
		<p class="atline line13"><img src="img/line13.png"></p>
	  </div>

	</div>
	
  </div>
</div>
<script>
$(function(){

var pointArr = [];
var points;
var start = true;
var end = false;
var tolerance = 30;

var getPointWz = function(){
    var offset,w,h;
    points = $("#atcont .point");
	for(i=0;i<points.length;i++){
	     offset = points.eq(i).offset();
		 w = points.eq(i).width()/2;
		 h = points.eq(i).height()/2;
		 pointArr[i] = [];
		 pointArr[i][0] = parseInt(offset.left) + w;
		 pointArr[i][1] = parseInt(offset.top) + h;
		 pointArr[i][2] = false;
	}
}

var getPointXY = function(x,y,n){
    var tXX,tYY,tFF;
	tXX = x - pointArr[n][0];
	tXX = tXX < 0 ? tXX * -1 : tXX;
	tYY = y - pointArr[n][1];
	tYY = tYY < 0 ? tYY * -1 : tYY;
	tFF = pointArr[n][2];
	return{
	     x : tXX,
	     y : tYY,
	     f : tFF
	}
}

var atobj = document.getElementById('atcont');

atobj.addEventListener('touchstart', function(event) { 
    event.preventDefault();
	getPointWz();
	var x,y,xy;
	start = false;
    var touch = event.targetTouches[0]; 

    x = touch.pageX;
	y = touch.pageY;

	$(".atcont").removeClass("ainm");

	//$("#wzx span").text(x);
	//$("#wzy span").text(y);

	if(!end){
	     xy = getPointXY(x,y,0);
		 x = xy.x;
		 y = xy.y;
		 if(x <= tolerance && y <= tolerance){
		      pointArr[0][2] = true;
		 }
	}
	//$("#fhx span").text(x);
	//$("#fhy span").text(y);
	//$("#fhff span").text(pointArr[0][2]);
}, false);

atobj.addEventListener('touchmove', function(event) { 
    event.preventDefault();
	if(start) return false;
	var x,y,xy;
    var touch = event.targetTouches[0]; 

    x = touch.pageX;
	y = touch.pageY;

	//$("#wzx span").text(x);
	//$("#wzy span").text(y);
	//$("#fhff span").text(pointArr[0][2]);

	if(!end){
	     if(pointArr[0][2] && !pointArr[1][2]){
		      xy = getPointXY(x,y,1);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[1][2] = true;
				   $("#atcont .atline:eq(0)").fadeIn(200);
		      }
			  //$("#fhx span").text(x);
	          //$("#fhy span").text(y);
	          //$("#fhff span").text(pointArr[1][2]);
		 }else if(pointArr[1][2] && !pointArr[2][2]){
		      xy = getPointXY(x,y,2);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[2][2] = true;
				   $("#atcont .atline:eq(1)").fadeIn(200);
		      }
		 }else if(pointArr[2][2] && !pointArr[3][2]){
		      xy = getPointXY(x,y,3);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[3][2] = true;
				   $("#atcont .atline:eq(2)").fadeIn(200);
		      }
		 }else if(pointArr[3][2] && !pointArr[4][2]){
		      xy = getPointXY(x,y,4);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[4][2] = true;
				   $("#atcont .atline:eq(3)").fadeIn(200);
				   $("#atcont .atline:eq(4)").fadeIn(200);
		      }
		 }else if(pointArr[4][2] && !pointArr[5][2]){
		      xy = getPointXY(x,y,5);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[5][2] = true;
				   $("#atcont .atline:eq(5)").fadeIn(200);
		      }
		 }else if(pointArr[5][2] && !pointArr[6][2]){
		      xy = getPointXY(x,y,6);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[6][2] = true;
				   $("#atcont .atline:eq(6)").fadeIn(200);
		      }
		 }else if(pointArr[6][2] && !pointArr[7][2]){
		      xy = getPointXY(x,y,7);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[7][2] = true;
				   $("#atcont .atline:eq(7)").fadeIn(200);
		      }
		 }else if(pointArr[7][2] && !pointArr[8][2]){
		      xy = getPointXY(x,y,8);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[8][2] = true;
				   $("#atcont .atline:eq(8)").fadeIn(200);
		      }
		 }else if(pointArr[8][2] && !pointArr[9][2]){
		      xy = getPointXY(x,y,9);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[9][2] = true;
				   $("#atcont .atline:eq(9)").fadeIn(200);
		      }
		 }else if(pointArr[9][2] && !pointArr[10][2]){
		      xy = getPointXY(x,y,10);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[10][2] = true;
				   $("#atcont .atline:eq(10)").fadeIn(200);
		      }
		 }else if(pointArr[10][2] && !pointArr[11][2]){
		      xy = getPointXY(x,y,11);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[11][2] = true;
				   $("#atcont .atline:eq(11)").fadeIn(200);
		      }
		 }else if(pointArr[11][2] && !pointArr[12][2]){
		      xy = getPointXY(x,y,12);
		      x = xy.x;
		      y = xy.y;
		      if(x <= tolerance && y <= tolerance){
		           pointArr[12][2] = true;
				   $("#atcont .atline:eq(12)").fadeIn(200);
				   end = true;
		      }
		 }
	}
}, false);

atobj.addEventListener('touchend', function(event) { 
    event.preventDefault();
	start = true;

	$(".atcont").addClass("ainm");

	if(!end){
	     $("#atcont .atline").fadeOut(200);
	}else{
	     setTimeout(function(){
		      $(".startpage").fadeOut(800);
			  setTimeout(function(){
			       $("#wbzymain").fadeIn(500);
			  }, 850);
		 }, 1000);
	     //$(".banner span").text('搞定');
	}
}, false);

})
</script>
</body>
</html>

发表于 |

canvas在截屏的时候，先用drawImage再用toDataURL，如果图片的链接中域名不是自己的域名，会报错提示跨域问题，解决办法就是从后端请求图片到前端，把图片转换成64位码，这样就不会有跨域的问题了。贴下主要代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
window.onload = function(){
	convertImgToBase64('图片链接', function(base64Img){
	    div.setAttribute("src", base64Img);
	});
	var canvas;
	var div = document.getElementById("ceshi");
	html2canvas(div,{canvas:canvas}).then(function(canvas){
		document.body.appendChild(canvas);
		canvas.toDataURL();//截屏的图片64位码
	})
}
function convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null; 
    };
    img.src = url;
}

不过应该很少有人遇到这个问题，因为有条件的人，图片都在自己服务器上，可以我这个活儿图片不能放在自己服务器上，所以只能这样搞了

发表于 |

其实这个东西没什么好说的，可是今天就是因为没搞明白这个background:url() top center no-repeat中的top center被老板骂了，一个1920px的背景图，要在950的屏上居中，我写得是background-size：100% 100%来自适应，哪想到老板说这是自适应不是居中，虽然我的也居中了，但是图片是显示的被压缩的那种，然后老板不厌其烦的跟我说用background:url() top center no-repeat，刚开始我还不信，马丹没想到还真的是居中了，各种被鄙视之后，就去百度了这个属性，基本上就是 “ 背景图相对于标签的显示的位置是顶部，中间铺开 “ ，自己一直觉得写页面布局CSS没什么问题，但是真的还是踩坑了，还被老板打脸，哎，记录一下吧。。另外又有个H5单子找自己，后天要，可是白天上班，晚上回去做，感觉根本来不及，压力蛮大的，所以就没接，现阶段还是多学点东西吧。。会的多了，挣钱以后有的是机会

发表于 | 
1
2
3
4
5
6
7
String.prototype.getUrlValue = function(parm) {
	var reg = new RegExp("(^|&)" + parm + "=([^&]*)(&|$)");
	var r = this.substr(this.indexOf("\?") + 1).match(reg);
	if (r != null) return unescape(r[2]);
	return null;
}
var id = window.location.href.getUrlValue("uid");

发表于 |

现在很多手机上的应用都有这样一个需求：选择背景图片，然后上传自己头像，然后合成一张图片分享出去。思路是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	canvas{
		width:200px;
		height:200px;
		position: absolute;
	    left: 10px;
    	top: 10px
	}
	#sc{
		border: 10px solid #000;
		width: 200px;
		height: 200px;
	}
	</style>
</head>
<body>
	<input type="file" id="photo">
	<canvas id="cvs"></canvas>
	<img id="sc"></div>
	<input type="button" value="生成" id="scbtn">
	<script>
		document.getElementById('photo').addEventListener('change',function(e){
			img = new Image();
			var files = this.files;		
			var reader = new FileReader();
			reader.readAsDataURL(files[0]);
			reader.onload = function(e){
				var mb = (e.total/1024)/1024;
				if(mb>= 2){
					alert('文件大小大于2M');
					return;
				}
				img.src = this.result;
				img.style.width = "80%";
				var c = document.getElementById("cvs");
				var ctx = c.getContext("2d");
				ctx.drawImage(img,10,10);
			}
		});
		var btn = document.getElementById("scbtn");
		btn.onclick = function(){
			var tt = document.getElementById("cvs").toDataURL("image/png");
			document.getElementById('sc').setAttribute("src", tt);
		}
	</script>
</body>
</html>

大致思路就是：每上传一张图片，就用canvas的drawImage()方法绘制出来图像，图像会自动叠加，然后生成的时候，用toDataURL方法转换成一张新图片添加到DOM里，这个过程中可以添加拖拽效果之类的

发表于 | 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="file" id="photo">
	<div id="click" style="width: 200px; height: 200px; border: 1px solid #000;"></div>
	<script>
		document.getElementById('photo').addEventListener('change',function(e){
		
		var files = this.files;
		var img = new Image();
		var reader = new FileReader();
		reader.readAsDataURL(files[0]);
		reader.onload = function(e){
			var mb = (e.total/1024)/1024;
			if(mb>= 2){
				alert('文件大小大于2M');
				return;
			}
			img.src = this.result;
			img.style.width = "80%";
			document.getElementById('click').style.width="200px";
			document.getElementById('click').style.height="200px";
			document.getElementById('click').innerHTML = '';
			document.getElementById('click').appendChild(img);
		}
	});
	</script>
</body>
</html>