Canvas跨域的解决方案介绍

Canvas 跨域如何解决？这里记录下使用 Canvas 绘图过程中所遇到的跨域问题和解决方案。

先来看下实现方法。

实现方法

基本流程如下:

获取 canvas 上下文 -- ctx

const canvas = document.querySelector(selector) const ctx = canvas.getContext('2d')

绘图

const image = new Image() image.src = src image.onload = () => {     ctx.save()     // 这里我们采用以下参数调用     this.ctx.drawImage(image, dx, dy, dWidth, dHeight)     this.ctx.restore() }

获取图像数据

调用 HTMLCanvasElement DOM 对象提供的 toBlob(), toDataURL() 或 getImageData() 方法，即可。

canvas.toBlob(blob => {     // 你要的 blob }, mimeType, encoderOptions)

这里的 mimeType 默认值为 image/png。encoderOptions 指定了图片质量，可用于压缩，不过需要 mimeType 格式为 image/jpeg 或者 image/webp。

Canvas 跨域

正常情况下，如果需要将绘制好的图像输出，我们可以调用 canvas 的 toBlob(), toDataURL() 或 getImageData() 方法来获取到图像数据。然而，遇到图片跨域的情况就有些尴尬了。可能回报如下错误:

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

或者

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

先来看看第2种情况。

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

说明不允许跨域访问，那么你可以试着让后台修改 Access-Control-Allow-Origin 的值为 * 或 your.website, 或者改用同域资源（考虑下？）。

接下来，我们来解决第1种情况。

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

如果你的图片服务允许跨域使用（如果不允许，见上条），那么你该考虑下给 img 元素加上 crossOrigin 属性，即：

const image = new Image() image.crossOrigin = 'Anonymous' image.src = src

如此，你便可以拿到图片数据了。如果没招，换同域资源吧～

以上就是Canvas跨域的解决方案介绍的详细内容，更多内容请关注技术你好其它相关文章！