使用blob解决canvas跨域的问题

该文章由 leevare 发布于 ,归类于 Javascript

如果想要获取一个图片上某个像素点的色值,可以使用canvas的getImageData来拿到数据,但是在canvas中,跨域图片是不能获取其图像信息的,如果取跨域的图片像素信息,就会出现跨域错误。

例如如下代码

const url = 'https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg'
const img = new Image()
img.onload = function () {
  ctx.drawImage(img, 0, 0)
  addEventListener('click', pick)
}

img.src = url
function pick (e) {
  const data = ctx.getImageData(e.layerX, e.layerY, 1, 1).data
  console.log(data)
}

点击canvas画布,将会抛出The canvas has been tainted by cross-origin data.,这是因为url中的图片地址是跨域的。

解决这个问题,首先你要在服务端允许该资源跨域访问,另外,在img上添加一个crossOrigin属性就可以解决跨域的问题了

img.crossOrigin = ''

这个属性的介绍可以参考MDN(启用了 CORS 的图片)

除了上面这个办法,还可以使用blob来解决这个问题,关于Blob,之前的文章中也有介绍“JavaScript中的Blob对象”。

这里需要多发出一条ajax请求(同样,该资源是允许跨域的才可以),将数据返回为blob对象形式,直接上代码(代码片段)

const url = 'https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg'

const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'

xhr.onload = function () {
  if (this.status === 200) {
    const blob = this.response

    const img = new Image()
    const imgObject = URL.createObjectURL(blob)
    img.onload = function () {
      ctx.drawImage(img, 0, 0)
      canvas.addEventListener('click', pick)
      document.body.removeChild(img)
      URL.revokeObjectURL(imgObject)
    }
    img.src = imgObject
    document.body.appendChild(img)
  }
}

xhr.send()

function pick (e) {
  const data = ctx.getImageData(e.layerX, e.layerY, 1, 1).data
  console.log(data)
}

记得资源使用完毕后,要手动调用URL.revokeObjectURL释放资源。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒