前端海报结合二维码生成图片以供用户分享保存，由于htmlcanvas 生成图片过大 ios高倍屏拦截 无图问题解决

前提

公司项目要加一个二维码海报，由于某些原因，所以只能由前端去做了。目前我查了一下网上普遍的用法是htmlcanvas2插件去做，其核心就是将dom元素绘制成canvas再转化为图片，这样转化的图片大部分不清晰。之后再去查找解决办法，查到的办法要不就是按照倍屏比去放大原图再绘制然后缩放，但是这样就会照成生成的图片过于巨大，200多kb的图片在处理后保存大小竟然有2-3MB，excuse me？在ios高倍屏中直接失败，显示白屏；要不就是我用了后完全没变化的。痛不欲生啊！！关于使用htmlcanvas的具体使用可自行百度或谷歌。

所以，迫不得已我只能自己用原生动手上了!

解决思路

其实原海报在2x,3x倍屏下都是很清晰的，原图大小为200-400kb，尺寸为750x1400。那么其实我完全可以去按照这个尺寸新建一个canvas画布等比例将原图绘制上去，然后在固定位置上绘制上动态生成的二维码即可。最后生成等比例大小的图片，在一个固定大小的容器中展示即可。这样用户保存的图片大小就和原图大小差不多，尺寸也一样！开始操作!

实际操作

1. 先用Qrcode插件生成二维码

// 二维码的生成信息以及配置信息，具体作用自行查看npm中的qrcode使用文档
 const opts = {
   
        errorCorrectionLevel: 'H',
        type: 'image/jpeg',
        quality: 1,
        margin: 1,
        color: {
   
          dark: '#000',
          light: '#fff'
        },
        width: 204
      }
      // 用于接受生成的二维码图片
      let codeImg = null
      // 生成二维码（qrUrl是二维码字符内容这里我设置的是百度的地址）
      QRCode.toDataURL(this.qrUrl, opts, (err, url) => {
   
        if (err) throw err
        codeImg = url
      })

2. 使用Promise.all确保所有的图片加载完毕

// 加载的图片src列表，自行设置。我这里使用的本地图片，可换网络图片
 const images = [
        require('../assets/test-hb.jpg'),
        codeImg,
        require('../assets/test-logo.jpg')
      ]
// 初始话promis列表和图片资源列表以及列表长度
const promiseAll =