二维码生成放图片里面并绑定下载

最新推荐文章于 2025-12-19 16:00:26 发布

原创最新推荐文章于 2025-12-19 16:00:26 发布 · 335 阅读

CC 4.0 BY-SA版权

文章标签：

<div style="width: 200px;margin-right: 20px;"><img style="width: 100%;" src="https://guoruiyu.oss-cn-beijing.aliyuncs.com/Upload/87424%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240408111130.jpg"></div>

<div id="down" style="margin-left: 20px;text-align: left"><a class="layui-btn" id="da" href="" download="分享海报.png">下载</a></div>
<div id="qr_code_div" style="width: 80px;margin-top: 10px;margin-left: 20px; text-align: center;" data-value="{$url??''}">
</div>

$("#down").hide()

    var qr=new QRCode("qr_code_div", {
      text: $('#qr_code_div').attr('data-value'),
      width: 240,
      height: 240,
      colorDark : "#000000",
      colorLight : "#ffffff",
      correctLevel : QRCode.CorrectLevel.H
    });


    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    var ctx = canvas.getContext('2d');

// 加载第一张图片
    var img1 = new Image();
    img1.src = 'https://api.guoruiyu.cn/static/image/img_xiadanhaibao@2x.png';

    img1.onload = function() {
      // 设置画布大小为第一张图片的尺寸
      canvas.width = img1.width;
      canvas.height = img1.height;

      // 在画布上绘制第一张图片
      ctx.drawImage(img1, 0, 0);

    };


    do_img2()
    function do_img2(){
      let qr_c=$('#qr_code_div canvas')[0];
      let qr_img = qr_c.toDataURL('image/png');
      setTimeout(function () {
        if (qr_img){
          // 加载第二张图片
          var img2 = new Image();
          img2.src = qr_img;
          img2.onload = function() {

            // 在画布上继续绘制第二张图片（覆盖在第一张图片之上）
            ctx.globalAlpha = 1; // 调节透明度
            ctx.drawImage(img2, 380, 1160);

            $("#da").attr("href", canvas.toDataURL('image/png'));
            $("#down").show()
          };
        }else {
          do_img2();
        }

      },1000);
    }