阅读 265

canvas 图片跨域问题

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

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

处理逻辑:

  1. 将海报和二维码转换为canvas,合成一张
  2. 将 canvas 转为图片
<template>
 <img :src="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 格式的二维码

文章分类
前端
文章标签