canvas浅尝一下说明：简单海报，一张背景图，一个名字，一张二维码。适用场景：分享带有名字和二维码的海报。前端生成海报

说明

简单海报，一张背景图，一个名字，一张二维码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas</title>
</head>
<style>
</style>
<body>
  <img id="scream" src="./yuan.jpg" width="621" height="1341"/>
  <img id="qrcode" src="./qrcode.png" width="233" height="251"/>
  <canvas id="canvasDemo" width="1242" height="2682" style="border:1px solid #d3d3d3;"></canvas>
</body>
<script>
  window.addEventListener('load',()=>{
    var canvas = document.getElementById('canvasDemo');
    var ctx = canvas.getContext('2d')
    var pic = new Image()//创建新的图片对象

    // 图片加载完成后再画图
    pic.onload = function() {
      ctx.drawImage(pic, 0, 0, 1242, 2682);
      ctx.font = "30px Arial";
      ctx.fillStyle = '#fff';
      ctx.fillText("Hello World",110,190);

      var qrcode = new Image();
      qrcode.onload = function() {
        ctx.drawImage(qrcode, 505, 2150, 233, 251);
        const base = canvas.toDataURL('image/png', 0.1); // 2.9M
        console.log(base, 'base'); // 由于base64字符串很大，输入在url中有长度限制，固被截断了。
        return;
        // 以下是下载图片的部分
        var aImg = document.createElement('a')
        aImg.href = base;
        aImg.download = 'demo.png'
        document.body.appendChild(aImg)
        aImg.click()
        document.body.removeChild(aImg)
      }
      qrcode.src = './qrcode.png'
    }
    pic.src = './yuan.jpg';
  })

</script>
</html>

备注：

通过new Image创建对象，onload函数写在上面，src赋值时，会触发onload事件。如果src在上面，onload事件可能没有绑定成功。

canvas浅尝一下

说明

备注：

参考文献