vue移动端不同源下载图片问题

Question

电脑谷歌调试没问题可以成功下载，但手机无法获取到文件 所以下载失败

<div class="btn f1" @click="downs">下载二维码</div>


downs() {
      this.downloadIamge(this.siteConfig.wximage, '二维码');
    },


downloadIamge(imgsrc, name) {
      // 下载图片地址和图片名
      const image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous');
      // eslint-disable-next-line func-names
      image.onload = function () {
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext('2d');
        context.drawImage(image, 0, 0, image.width, image.height);
        const url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
        const a = document.createElement('a'); // 生成一个a元素
        a.download = name || 'photo'; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.click();
      };
      image.src = imgsrc;
      this.$popup.open({
        content: '下载成功',
      });
    },
    

——————电脑调试下载成功——————

——————手机下载获取失败——————

Answer 1

应该还是canvas.toDataURL的跨域造成的，很多webwiew的沙箱有安全设置；虽然你已经设置了
crossOrigin属性，两步建议:

• 第一步：直接设置image.crossOrigin = 'anonymous';
• 第二步：如果你的图片源不是你同域名下的，是文件服务器下的，看服务器能不能设置一个跨域的头部：Access-Control-Allow-Origin: '*'

Answer 2

相信这篇文章可以让你更加全面的了解

Answer 3

浏览器问题，换个火狐就能下载；