canvas做简单图文卡片

<div class="wrap">
  <img src="" alt="" />
</div>

let url = ''
let name = '我的名字十二个字啊你数数'
let img = new Image()
img.setAttribute('crossOrigin', 'Anonymous')
img.src =
  'http://qiniu001.dc-resource.hqsfpay.com/FraYy3KcHph4B8jK1w8MB4BhKCmq'
img.onload = () => {
  const mycanvas = document.createElement('canvas')
  mycanvas.width = 230
  mycanvas.height = 260
  let ctx = mycanvas.getContext('2d')
  ctx.fillStyle = '#fcfcfc'
  ctx.fillRect(0, 0, mycanvas.width, mycanvas.height)
  ctx.font = 'bold 16px Arial'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'bottom'
  ctx.fillStyle = '#000'
  ctx.fillText(name, 115, 30)
  ctx.drawImage(img, 10, 40, 210, 210)
  url = mycanvas.toDataURL('image/jpg')
  document.querySelector('.wrap img').src = url
}