Canvas 画布

HTML原生画布元素

画布转图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let cvs = document.createElement('canvas')
let ctx = cvs.getContext('2d')
console.log(imgList[0].height)
cvs.height = imgList[0].height
cvs.width = imgList[0].width
ctx.textAlign = 'center'
//render img
ctx.drawImage(imgList[2], cvs.width / 2 - cvs.width * 0.2 / 2, cvs.height * 0.2, cvs.width * 0.2, cvs.width * 0.2)
ctx.drawImage(imgList[0], 0, 0)
ctx.drawImage(imgList[1], cvs.width / 2 - imgList[1].width / 2, cvs.height * 0.35)
//render text
ctx.font = "15px Helvetica";
ctx.fillStyle = '#4b4f58'
ctx.textAlign = 'center'
ctx.fillText(this.user.name, cvs.width / 2, cvs.height * 0.335);
//gene image to show
let show = document.querySelector('#show')
show.src = cvs.toDataURL('image/jpeg')