var dp = window.devicePixelRatio || 1
var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
var ratio = this.dp / this.backingStoreRatio
var oldWidth = canvas.width
var oldHeight = canvas.height
canvas.width = oldWidth * ratio
canvas.height = oldHeight * ratio
canvas.style.width = oldWidth + 'px'
canvas.style.height = oldHeight + 'px'
ctx.scale(ratio, ratio)
var headerImg = new Image()
var bgImg = new Image()
headerImg.src = target
bgImg.src = '../bg.png'
headerImg.onload = (e) => {
// 图片的宽高比
var rate = headerImg.width / headerImg.height
console.log(rate)
bgImg.onload = (e) => {
ctx.drawImage(headerImg, 10, 30, 50, (50 / rate))
// 背景图片
ctx.drawImage(bgImg, 0, 0, 150, 150)
ctx.fillText('厉害啊', 80, 70)
var resultImg = new Image()
resultImg.src = canvas.toDataURL('image/png', 1)
resultImg.style.width = '100%'
var cardImg=document.getElementById("cardImg");
cardImg.setAttribute("src", resultImg.src)
}
}
取到刚刚得到的图片，在图像装载完毕时后将其画到画布上，也可以配上文字等等，最后也是把canvas的信息转为base64编码来进行实现 。可以通过代码来进行实例的实践
