-
Notifications
You must be signed in to change notification settings - Fork 0
/
画布图片.html
108 lines (86 loc) · 3.1 KB
/
画布图片.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input id='text' type="text" placeholder="内容" value="文字文字文字">
<div>
距离顶部位置：<input id='top' type="text" placeholder="百分比" value="222">
</div>
<div>
距离左侧位置：<input id='left' type="text" placeholder="百分比" value="222">
</div>
<div>
logo：<input id='logo' type="text" placeholder="百分比" value="./images/1.png">
</div>
<div>
logo位置：<input id='logo-l' type="text" placeholder="左" value="200">
<input id='logo-r' type="test" placeholder="右" value="200">
</div>
<button onclick="download()">download</button>
<button onclick="preview()">预览</button>
<div id='preview'></div>
<script>
function preview(){
createCanvas(function(canvas){
const e = document.getElementById('canvas')
if(e){
document.getElementById('preview').removeChild(e)
}
document.getElementById('preview').append(canvas)
})
}
function createCanvas(callback){
const canvas = document.createElement('canvas');
canvas.id = 'canvas';
const ctx = canvas.getContext('2d');
const image = new Image(); // Using optional size for image
image.onload = drawImageActualSize; // Draw when image has loaded
// image.src = './images/[email protected]'
image.src = './html2canvas/海报.jpg'
function drawImageActualSize() {
console.log('drawImageActualSize')
// Use the intrinsic size of image in CSS pixels for the canvas element
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
// Will draw the image as 300x227, ignoring the custom size of 60x45
// given in the constructor
ctx.drawImage(this, 0, 0);
logo(canvas, callback);
}
}
function logo(canvas, callback){
const ctx = canvas.getContext('2d');
const imageLogo = new Image(); // Using optional size for image
imageLogo.src = document.getElementById('logo').value;
imageLogo.onload = function(){
console.log('logo')
ctx.drawImage(this, document.getElementById("logo-l").value, document.getElementById("logo-r").value, 100, 100);
font(canvas, callback);
}
}
function font(canvas, callback){
console.log('font')
const ctx = canvas.getContext('2d');
ctx.font = "48px serif";
ctx.fillStyle = "red";
ctx.fillText(document.getElementById('text').value, document.getElementById('top').value, document.getElementById('left').value);
ctx.font = "28px serif";
ctx.fillStyle = "blue";
ctx.fillText(document.getElementById('text').value, 100, 100);
callback(canvas);
}
function download(){
createCanvas(function(canvas){
const image = new Image();
image.src = canvas.toDataURL('image/png');
const alink = document.createElement('a');
alink.href = image.src;
alink.download = '5周年纪念头像.png';
alink.click();
})
}
</script>
</body>
</html>