绘制海报（二维码）

作者: 苍老师的眼泪 | 来源:发表于2022-01-01 21:23 被阅读0次

绘制海报（二维码）
php绘制海报方法
小程序开发笔记《七》使用canvas绘制带二维码海报并预览保存到
绘制海报
小程序canvas绘制海报二维码
Canvas - 海报绘制
如何制作海报
信平七彩营业厅巡检
canva绘制海报02：圆角海报
生成二维码并合成到海报图

<!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>分享海报邀请好友 - 赚取佣金</title>

    <style>
        html,
        body {
            width: 100%; 
            height: 100%; 
            padding: 0;
            margin: 0;
            background-color: #fff;
            overflow: hidden;
        }
        
        canvas {
            display: none;
        }
        
        .tips {
            text-align: center;
            color: black;
        }

        #poster_img {
          display: block;
          margin: 0 auto;
          margin-top: 10px;
          border-radius: 5px;
          border: 1px solid gray;
          width: 80%;
        }
    </style>

    <style>
        #wrapper {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
    </style>
</head>

<body>

    <div id="wrapper">
        <img id="poster_img" alt="">

        <canvas id="canvas"></canvas>
      
        <div class="tips">长按图片保存分享给好友</div>
    </div>



    <script>

        let bg_width
        let bg_height

        let poster_img = document.getElementById("poster_img");
        let canvas = document.getElementById("canvas");



        let bg_img = new Image()
        let bg_img_ready = false
        bg_img.setAttribute('crossOrigin', 'anonymous');

        bg_img.src = '/assets/invite/poster.jpg'
        bg_img.onload = function() {
          console.log("bg_img_ready")

          bg_width = bg_img.width
          bg_height = bg_img.height

          canvas.width = bg_width
          canvas.height = bg_height

          bg_img_ready = true
          if (qrcode_img_ready) 
            draw()
        }



        let qrcode_img = new Image()
        let qrcode_img_ready = false
        qrcode_img.setAttribute('crossOrigin', 'anonymous');

        qrcode_img.src = "https://zsclaravel.gign.xyz/api/invite/create_qrcode?inviter_id=20"
        qrcode_img.onload = function() {
          console.log("qrcode_img_ready")
          qrcode_img_ready = true
          if (bg_img_ready) 
            draw()
        }


        let qrcode_size = 200


        
        function draw() {
            let ctx = canvas.getContext("2d")
            
            console.log("drawing canvas")
            ctx.drawImage(bg_img, 0, 0, bg_img.width, bg_img.height)
            ctx.drawImage(qrcode_img, bg_width / 2 - qrcode_size, bg_height - (qrcode_size + 70), qrcode_size, qrcode_size)
    
            poster_img.src = canvas.toDataURL()
        }
    </script>
</body>

</html>