Vue用Canvas生成二维码合成海报并解决清晰度问题

前言

最近接到一个需求，用文字和图片合成一个海报，用于活动结尾页在微信长按分享，接到需求的第一时间，我就想到用 canvas 来画，但是看到 canvas 繁琐的绘制过程，不由得感到头大，后几经搜索，果然发现已经有人造好了轮子。此篇文章主要记录下实现过程，以及遇到的问题。

依赖

QRCode 这个依赖主要是用于移动端将 url 生成二维码，注意名字叫 qrcodejs2 别安装错

npm install qrcodejs2 --save 

import QRCode from "qrcodejs2"
复制代码

html2canvas

这个依赖主要是将当前 HTML 结构以及 css 样式转换为 canvas。比自己用 api 去画方便多了

Canvas2Image Github

这个依赖主要是将 canvas 转换为图片，实际上，Canvas2Image.js 也是基于 canvas.toDataURL 的封装，相比原生的 API 对于转为图片的功能上考虑更为具体(未压缩的包大小为 7.4KB )，适合项目使用。

主要思路

将所有的海报结构都写在一个父级结构中,然后调用 html2canvas 转换为图片，创建 image,通过 css 层级和定位，将 image 置为最顶层，来实现长按分享

代码

html 部分

 <!--html 结构,具体 css 不写了-->

 <!-- 海报 html 元素 -->
    <div
      id="posterHtml"
      :style="{backgroundImage: 'url('+posterHtmlBg+')'}"
    >
      <div class="posterHtml">
    
        <div class="posterklass">我是{
   {name}},邀请您:</div>
        <!-- 二维码 -->

        <div id="qrcodeImg" :if="postcode"></div>

      </div>
    </div>
    
    <!--image 即将要插入的位置，这样的结构处理，配合方法里面的 css 会自动置为最顶层-->
    
    <div id="myCanvas"></div>
    <!--提示用户的文案，其实也可以写在海报 html 结构中，通过 html2canvas 的 ignore 来忽略生成-->
    
    <span class="tip">长按保存该海报，邀请好友来测！</span> 
    
复制代码

js 部分

    
    //生成二维码
    
     createQrcode(text) {
    
      const qrcodeImgEl = document.getElementById("qrcodeImg");
      qrcodeImgEl.innerHTML = "";
      let width = document.documentElement.clientWidth;
      
      //宽度自己定义  我取的设备的宽度 *0.32
      
      width = width * 0.32;

      let</