关于canvas图片跨域问题

Question

1. 使用 canvas 绘图时，为什么不通过 CORS 使用图片会污染画布？按MND的说法是：可避免未经许可拉取远程网站信息而导致的用户隐私泄露。那是怎么通过加载图片导致用户隐私泄漏的？..
2. 为什么普通在 html 中使用img标签或者 css 中使用background加载图片不需要走 CORS 去加载呢并且不泄漏隐私呢？

网上搜到的答案清一色是关于如何解决 canvas 跨域，请各路大佬传授一下新知识..

Answer 1

你用img标签，撑死获得图片尺寸，具体内容获取不到的，如果用background的话啥都获取不到
就比如说A网站的用户头像是个固定地址，如果不做限制，别的网站就可以获得A网站当前登录的用户头像

Answer 2

Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

If the source of the foreign content is an HTML <img> or SVG <svg> element, attempting to retrieve the contents of the canvas isn't allowed
You can read more about this here

Answer 3

image.setAttribute(‘crossorgin’,’anonymous’)

将image作为文件读取blob流,ctx.toBlob 试试

export function imageToFileByCanvas(image: HTMLImageElement, fileName: string = "image.jpg"): Promise<File> {
    const canvas = document.createElement("canvas")
    canvas.width = image.width
    canvas.height = image.height

    const ctx = canvas.getContext("2d")!
    ctx.drawImage(image, 0, 0)

    return new Promise(resolve => canvas.toBlob(blob => resolve(new File([blob!], fileName))))
}

async function getImage(){
      const file = await imageToFileByCanvas(image, "image.jpg")
    const imgUrl = URL.createObjectURL(file) // image 内存地址
}

export function imageToFileByBlob(image: HTMLImageElement, fileName: string = "image.jpg") {
    const binStr = atob(image.src.split(",")[1])
    const len = binStr.length
    const arr = new Uint8Array(len)
    for (let i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i)
    }

    const blob = new Blob([arr], { type: "image/png" })
    return new File([blob], fileName)
}