H5W3
当前位置:H5W3 > 问答 > 正文

为什么图片无法跨域下载却可以右键另存为

function downloadImage(src) {
  const a = document.createElement('a')
  const urlArr = src.split('/')
  const name = urlArr[urlArr.length - 1]
  a.download = name
  a.style.display = 'none'
  const image = new Image()
  image.crossOrigin = "Anonymous"
  image.src = src + '?v=' + Math.random()
  image.onload = () => {
    const base64 = getBase64Image(image)
    a.href = base64
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }
  const getBase64Image = (img) => {
    const canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    const ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    const dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
  }
}

通过以上方式下载https://img.3dmgame.com/uploa…
会出现跨域错误,

为什么图片可以另存为呢?

回答

因为你直接点连接,相当于单独窗口打开,服务器端可能有防盗链处理判断,这种相当于盗链而被拒绝。
另存为是在当前浏览下,已经下载数据的保存,不会触发这样的机制。

服务器端要设置允许跨域:access-control-allow-origin: *;
不然前端设置 image.crossOrigin = “Anonymous” 是无效的;

你试下这个:

downloadImage('http://n.sinaimg.cn/photo/transform/700/w1000h500/20201106/1ad8-kcpxnwv8925892.png')

为什么图片无法跨域下载却可以右键另存为

未经允许不得转载:H5W3 » 为什么图片无法跨域下载却可以右键另存为

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址