现在很多手机上的应用都有这样一个需求：选择背景图片，然后上传自己头像，然后合成一张图片分享出去。思路是这样的：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里，这个过程中可以添加拖拽效果之类的