DEV Community
·
污染画布：为什么浏览器阻止你的画布（以及如何解除阻止）
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
使用<canvas>时，若图像来自不同源，可能会出现“污染画布”错误。解决方法是在<img>标签中添加crossOrigin="anonymous"，并确保服务器返回Access-Control-Allow-Origin头。如果无法控制服务器，可通过后端中转或使用CORS代理。
🎯
关键要点
- 使用<canvas>时，若图像来自不同源，可能会出现“污染画布”错误。
- 污染画布错误会阻止读取画布像素，导致canvas.toDataURL()或getImageData()等调用失败。
- 解决污染画布错误的方法是在<img>标签中添加crossOrigin='anonymous'，并确保服务器返回Access-Control-Allow-Origin头。
- 如果无法控制服务器，可以通过后端中转或使用CORS代理来解决问题。
- 后端中转是指在自己的后端获取图像，并使用正确的CORS头提供给浏览器。
- CORS代理可以为你注入所需的头，适合静态网站或没有后端的情况。
- 污染画布是浏览器防止访问包含跨源数据的画布的一种方式。
❓
延伸问答
什么是污染画布错误？
污染画布错误是指当从不同源加载图像到<canvas>时，浏览器阻止读取画布像素，导致canvas.toDataURL()或getImageData()等调用失败。
如何解决污染画布错误？
解决污染画布错误的方法是在<img>标签中添加crossOrigin='anonymous'，并确保服务器返回Access-Control-Allow-Origin头。
如果无法控制服务器，应该怎么办？
如果无法控制服务器，可以通过后端中转获取图像，或使用CORS代理来解决污染画布问题。
什么是CORS代理，它有什么用？
CORS代理是一种服务，可以为你注入所需的CORS头，适合静态网站或没有后端的情况。
污染画布错误的原因是什么？
污染画布错误的原因是从不同源加载图像而没有正确的CORS设置，导致浏览器将整个画布标记为“污染”。
如何在代码中设置crossOrigin属性？
在代码中，可以通过image.crossOrigin = 'anonymous';来设置crossOrigin属性，然后加载图像。
➡️
