前端常见问题——Canvas 图片跨域

最新推荐文章于 2024-04-19 16:27:15 发布

转载

最新推荐文章于 2024-04-19 16:27:15 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016423028

文章标签：

#前端 #移动开发 #ViewUI

在前端开发中，直接在 Canvas 画布上使用跨域图片会导致画布污染，限制了对画布数据的读取。通过设置图片的 crossorigin 属性并配合 CORS 响应头，可以解决这一问题。然而，兼容性问题需要注意，如 IE 10 及以下和部分 Android 版本不支持。文章提供测试示例和解决方案，探讨如何在不同浏览器中正确处理 Canvas 图片跨域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

尽管不通过 CORS 就可以在 Canvas 画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露。

HTML 规范中图片有一个 crossorigin 属性，结合合适的 CORS 响应头，就可以实现在画布中使用跨域 <img> 元素的图像。

crossOrigin/CORS	同域	跨域无 CORS	跨域有 CORS
default	支持	支持渲染，不支持 `toDataURL`	支持渲染，不支持 `toDataURL`
anonymous	N/A	同上	支持渲染，支持 `toDataURL`
use-credentials	N/A	同上	支持渲染，不支持 `toDataURL`

总结：Canvas 可以正常的渲染跨域图片，但是在跨域图片没有设置跨域响应头或没有设置 crossOrigin = 'anonymous' 的时候，使用 canvas.toDataURl 会抛出如下错误：<

最低0.47元/天解锁文章

200万优质内容无限畅学