-
Notifications
You must be signed in to change notification settings - Fork 15
/
sample.html
119 lines (108 loc) · 4.15 KB
/
sample.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>头像大作战</title>
<style>
body {
background: #000 url(./img/bg.png) no-repeat center;
text-align: center;
}
#avatar {
width: 300px;
height: 300px;
position: relative;
margin: auto;
overflow: hidden;
}
#avatar img {
width: 100%;
}
#avatar_template {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<header><h1>头像大作战</h1></header>
<article>
<section>
<p>
<!--accept 限制了只能选择图片-->
<input type="file" name="" id="upload" accept="image/*" onchange="loadImage()">
</p>
<p id="avatar">
<img src="./img/head0.png" alt="0" id="avatar_template">
<img src="" alt="" id="avatar_img">
</p>
<p>
<canvas width="300" height="300" id="cvs" style="display: none"></canvas>
</p>
<p>
<button id="prev" onclick="prevTemplate()">上一个</button>
<button id="download" onclick="downloadImage()">下载</button>
<button id="next" onclick="nextTemplate()">下一个</button>
</p>
</section>
</article>
<footer>
<script>
function loadImage() {
// 载入图片生成 blob 链接
var imgUrl = window.URL.createObjectURL(document.getElementById('upload').files[0]);
document.getElementById('avatar_img').src = imgUrl;
drawImage(imgUrl, document.getElementById('avatar_template').src)
}
function drawImage(img, frame) {
var cvs = document.getElementById('cvs');
var size = 300;
cvs.width = size;
cvs.height = size;
var ctx = cvs.getContext('2d');
var image = new Image;
image.src = img;
image.onload = function() {
ctx.drawImage(image, 0, 0, size, size);
image = new Image;
image.src = frame;
image.onload = function() {
ctx.drawImage(image, 0, 0, size, size);
}
}
}
function downloadImage() {
var canvas = document.getElementById('cvs');
// 导出图片 DataURL
var image = canvas.toDataURL("image/png")
// 创建一个 a 标签，设置 download 属性，点击时下载文件
var save_link = document.createElement('a');
save_link.href = image;
save_link.download ='avatar.png';
// 创建 click 模拟事件
var clickevent = document.createEvent('MouseEvents');
clickevent.initEvent('click', true, false);
// 触发点击事件
save_link.dispatchEvent(clickevent);
}
function prevTemplate() {
var current = parseInt(document.getElementById('avatar_template').alt);
current = (current - 1 + 4) % 4;
document.getElementById('avatar_template').src = 'img/head' + current + '.png';
document.getElementById('avatar_template').alt = current;
loadImage();
}
function nextTemplate() {
var current = parseInt(document.getElementById('avatar_template').alt);
current = (current + 1) % 4;
document.getElementById('avatar_template').src = 'img/head' + current + '.png';
document.getElementById('avatar_template').alt = current;
loadImage();
}
</script>
</footer>
</body>
</html>