-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathicon2logo.html
85 lines (77 loc) · 2.84 KB
/
icon2logo.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>icon to logo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
</head>
<body>
<h3>
用 icon 生成一个 logo，上传 icon
文件（png，svg...），设置尺寸和背景色，输出一张新图片
</h3>
<form>
<input type="file" accept="image/*" onchange="selectImage(event)" />
</form>
<h4>logo尺寸：</h4>
<p>宽度: <input type="number" class="logo-width" value="360" /> px</p>
<p>高度: <input type="number" class="logo-height" value="360" /> px</p>
<h4>icon尺寸：</h4>
<p>宽度: <input type="number" class="icon-width" value="200" /> px</p>
<p>高度: <input type="number" class="icon-height" value="200" /> px</p>
<h4>背景颜色：</h4>
<input type="color" class="bg-color" value="#4fc08d" />
<h4>结果：</h4>
<div class="output"></div>
</body>
<script>
function selectImage(event) {
// 移除上次生成的图片
if (document.querySelector(".output").childNodes.length > 0) {
document
.querySelector(".output")
.removeChild(document.querySelector("canvas"));
}
// 读取文件
var file = event.target.files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = (readerEvent) => {
// 创建图片
var image = new Image();
image.src = readerEvent.target.result;
image.onload = (imageEvent) => {
var canvas = document.createElement("canvas");
var logoWidth = document.querySelector(".logo-width").value;
var logoHeight = document.querySelector(".logo-height").value;
var iconWidth = document.querySelector(".icon-width").value;
var iconHeight = document.querySelector(".icon-height").value;
var bgColor = document.querySelector(".bg-color").value;
console.log("logoWidth", logoWidth);
console.log("logoHeight", logoHeight);
console.log("iconWidth", iconWidth);
console.log("iconHeight", iconHeight);
console.log("bgColor", bgColor);
// 设置 logo 尺寸
canvas.width = logoWidth;
canvas.height = logoHeight;
var ctx = canvas.getContext("2d");
// 设置 logo 背景色
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, logoWidth, logoHeight);
// 把 icon 绘制到 logo 中间
ctx.drawImage(
image,
(logoWidth - iconWidth) / 2,
(logoWidth - iconWidth) / 2,
iconWidth,
iconHeight
);
document.querySelector(".output").appendChild(canvas);
document.querySelector("form").reset();
};
};
}
</script>
</html>