使用JavaScript画一个图片

html部分代码:

1
2
3
4
5
6
7
8
<html>
<head>canvas</head>
<body>
<input type="file" id="avatar">

<canvas id="canvas"></canvas>
</body>
</html>

javascript部分代码:

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
function draw(avatar) {
const $canvas = document.getElementById('canvas')
const ctx = $canvas.getContext('2d')

const img = new Image()
img.onload = () => {
ctx.drawImage(img, 0, 5, 40, 40)
}
img.src = URL.createObjectURL(avatar)

ctx.font = 'bold 14px sans-serif'
ctx.fillStyle = 'blue'
ctx.fillText('EGOIST', 50, 15)

const usernameWidth = ctx.measureText('EGOIST').width
ctx.font = '14px sans-serif'
ctx.fillStyle = '#666'
ctx.fillText('2017/7/7', usernameWidth + 50 + 10, 15)

const content = `hello world
goodbye world`
content.split('\n').forEach((text, index) => {
ctx.fillText(text, 50, 30 + 15 * index)
})
}

document.getElementById('avatar').addEventListener('change', e => {
draw(e.target.files[0])
})

效果图:

原图

DrW9R.jpg

渲染后

DrjKY.png

Share

如果你觉得本文对你有帮助,可以请我喝杯咖啡。

好吧,请你喝一杯