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])
})
|
