Canvas跨域的解决方案介绍(2)-木庄网络博客

调用 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() 方法来获取到图像数据。然而，遇到图片跨域的情况就有些尴尬了。可能回报如下错误:

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

或者

1	`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-Control-Allow-Origin
如果你跨域使用某些图片资源，并且该服务未正确响应 Access-Control-Allow-Origin 头信息, 则会报出如下错误信息:

1	`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种情况。

img.crossOrigin = 'Anonymous'
为避免未经许可拉取远程网站信息而导致的用户隐私泄露（如 GPS 等信息，具体可搜索 Exif），在调用 canvas 的 toBlob(), toDataURL() 或 getImageData() 会抛出安全错误:

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跨域的解决方案介绍的详细内容，更多文章请关注木庄网络博客！

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者