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

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

<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: '下载成功',
      });
    },
    
——————电脑调试下载成功——————

谷歌下载成功 2020-01-15 17.17.50.png

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

WechatIMG8.jpeg

待解决 悬赏分:70 - 离问题结束还有
反对 0举报 0 收藏 0

我来回答

回答3