带有二维码的海报vue

项目需求，需要分享一个带有二维码的海报，而且二维码是动态生成的。初步思路是用canvas将图片画出来再将图片画到一起，然后将整个canvas转成图片输出。

.canimg 就是我们需要放合成之后的图的地方。

<img class="canimg"/>

.myCanvas就是合成的画布。

<canvas style="display:none" class="myCanvas"></canvas>

能使用这个方法的前提是有图片链接或者图片文件都可以。这是可以变通的。

toimg(aa,bb,qh,qw){//参数分别是：背景，二维码链接,二维码起始坐标x、y
      //画海报
      var c = document.getElementsByClassName("myCanvas")[0];
      c.width = 500;
      c.height = 900;//需要的图片的宽高
      var ctx = c.getContext("2d");
      ctx.scale(2,2);
      //首先画上背景图
      var img = new Image();
      img.src = aa ;
      img.setAttribute("crossOrigin", 'Anonymous');
      //画上二维码
      var qrcode = new Image();
      qrcode.src = bb;
      img.onload = function() { //必须等待图片加载完成
         ctx.drawImage(img,  0,0 ,262, 467); //绘制图像进行拉伸 背景
         ctx.drawImage(qrcode, qh, qw, 70, 70); //二维码
         //绘制完成,转为图片
         setTimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个settimeout
           var bigcan = document.getElementsByTagName('canvas')[0];
           // console.log(bigcan);
           let images = new Image();
           images.src = bigcan.toDataURL("image/png");
           images.setAttribute("crossOrigin", 'Anonymous')
           document.getElementsByClassName('canimg')[0].src = bigcan.toDataURL("image/png");
         }, 0)
      }
      

为了图片更清晰，我将图片绘画的时候canvas放大了2倍，然后图片缩小了2倍，大小还是需要的大小。这是我百度到的一个简单粗暴的方法。只不过如果图片本身很大的话会使过程变得很漫长。这一点我还没有找到方法解决。