canvas 图片跨域问题

最近遇到一个需求，需要将一张海报和接口返回的二维码图片合成一张图片，h5 页面打开，可下载图片；

下载好说，做的是微信公众号，只要是图片，长按就可以通过微信进行下载。

处理逻辑：

1. 将海报和二维码转换为canvas，合成一张
2. 将 canvas 转为图片

<template>
 <img :src="https://juejin.cn/post/imgSrc" alt="海报" class="poster" />
</template> 
<script>
  export default {
    data() {
      return {
        imgSrc: ''
      }
    },

		methods: {
      canvasAndImage() {
       // 创建canvas DOM元素，并设置其宽高和图片一样
       const canvas = document.createElement('canvas')
       var ctx = canvas.getContext('2d')

       // 画布尺寸
       canvas.width = 300
       canvas.height = 450

       // 创建图片和二维码
       const img = new Image(60, 45)
       const qr = new Image(60, 45)
      
       // 加载图片
       img.src = require('@/assets/icon/poster.jpg')
       qr.src = require('@/assets/icon/qr.png')
        
       // 图片加载完成后，拼接到canvas
       img.onload = () => {
         ctx.drawImage(img, 0, 0, 300, 450)
         ctx.drawImage(qr, 220, 375, 60, 60)

         // 将canvas转化为图片src路径
         this.imgSrc = canvas.toDataURL('image/png')
       }
     }
    }
  }
</script>
复制代码

本地图片，完全没问题

然后对接接口，通过接口去获取二维码，问题来了

1. qr 通过接口获取，导致了跨越问题，画布渲染失败
2. 转换图片失败

网传解决方法：

1. 给 img 添加 img.crossOrigin = ‘Anonymous’ 失败，需要后台配合设置，但因为本次项目的二维码是微信生成的，所以不可配置
2. 将获取到的 url 转换为 base64，找到的几个转换方法都不可以。

解决办法，后台给 base64 格式的二维码