canvas合成二维码后，前端使用a标签download属性保存图片至本地

最新推荐文章于 2020-07-20 19:31:28 发布

weixin_30784501

最新推荐文章于 2020-07-20 19:31:28 发布

阅读量135

点赞数

文章标签：前端后端 ViewUI

原文链接：http://www.cnblogs.com/chuntian1989/p/10160009.html

版权

需求描述：需求中为了减少服务器内存，后端返回二维码，由前端添加背景图片，合成一张二维码下载图片。

1、合成图片

<canvas id="codeCanvas" width="350" height="507"></canvas>

 const canvas = document.getElementById("codeCanvas");
      const ctx = canvas.getContext("2d");
      //背景图片
      let bgImg = document.getElementById("myImg");
      //二维码图片
      let codeImg = new Image();
      codeImg.src = this.imgUrl;
      //绘制背景
      ctx.drawImage(bgImg, 0, 0, 350, 507);
      //绘制二维码 必须得在图片加载后调用才行
      codeImg.onload = () =>{
        ctx.drawImage(codeImg, 60, 140, 230, 240);
      }

2、图片下载

 <!-- a标签模拟下载 -->
    <a :href="downLoadImgUrl" download="two_code.png" id="downLoadBtn" style="display:none;"></a>

 //将canvas图片转换成url路径，并将url路径放至a标签内的
      this.downLoadImgUrl = document.getElementById("codeCanvas").toDataURL("image/png");
      // js点击a标签
      setTimeout(()=>{
         document.getElementById('downLoadBtn').click();
      },500)

转载于:https://www.cnblogs.com/chuntian1989/p/10160009.html