解决图片跨域

背景：

        一般情况下图片是不会出现跨域的问题的，但是我在做图片渐变的需求时，需要使用canvas获取图片中的像素，这个时候一般就会出现图片跨域。

解决方式：

1. 后端通过设置标头为*，前端给图片标签添加 crossOrigin 属性为 anonymous（IE10浏览器不支持 crossOrigin）
2. 通过XMLHttpRequest请求把图片地址转成Blob对象，这样就不会因为域名等而出现跨域的问题

 方式一：

        给图片服务器配置Access-Control-Allow-Origin信息

header("Access-Control-Allow-Origin: *");
// 获取指定图片的域名
header("Access-Control-Allow-Origin: http://......")

        给图片crossOrigin配置为anonymous

<img src="http://..." crossOrigin="anonymous">

const image = new Image()
image.src = url
image.crossOrigin = "anonymous"

方法二：

        不通过img标签来请求图片，而是通过XMLHttpRequest间接获取图片的blob地址

const xhr = new XMLHttpRequest()
xhr.onload = function () {
    const url_blob = URL.createObjectURL(this.response)
    const image = new Image()
    image.src = url_blob
    image.onload = () => {
        // 这里面就可以对图片进行任意操作了
    }
}
// url 图片的地址
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.send()

第二种方式就会请求两次图片，虽然没有浏览器的兼容问题，但因为是blob地址，所以图片不宜过大，否则超过blob尺寸限制就会有问题。

参考：

解决canvas图片getImageData,toDataURL跨域问题 « 张鑫旭-鑫空间-鑫生活