背景:

        一般情况下图片是不会出现跨域的问题的,但是我在做图片渐变的需求时,需要使用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跨域问题 « 张鑫旭-鑫空间-鑫生活

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐