DEV Community
·
污染画布：为什么浏览器阻止你的画布（以及如何解除阻止）
内容提要
使用<canvas>时，若图像来自不同源，可能会出现“污染画布”错误。解决方法是在<img>标签中添加crossOrigin="anonymous"，并确保服务器返回Access-Control-Allow-Origin头。如果无法控制服务器，可通过后端中转或使用CORS代理。
关键要点
-
使用<canvas>时，若图像来自不同源，可能会出现“污染画布”错误。
-
污染画布错误会阻止读取画布像素，导致canvas.toDataURL()或getImageData()等调用失败。
-
解决污染画布错误的方法是在<img>标签中添加crossOrigin='anonymous'，并确保服务器返回Access-Control-Allow-Origin头。
-
如果无法控制服务器，可以通过后端中转或使用CORS代理来解决问题。
-
后端中转是指在自己的后端获取图像，并使用正确的CORS头提供给浏览器。
-
CORS代理可以为你注入所需的头，适合静态网站或没有后端的情况。
-
污染画布是浏览器防止访问包含跨源数据的画布的一种方式。
延伸解读
污染画布的影响
污染画布错误会阻止开发者读取画布中的像素数据，这对图像处理和导出功能造成了限制。在开发涉及图像的应用时，必须考虑跨源资源的使用，确保正确配置CORS以避免此类问题。
解决方案的选择
解决污染画布问题有两种主要方法：控制服务器或使用后端中转。若无法控制服务器，使用CORS代理是一个有效的替代方案，尤其适合静态网站。选择合适的解决方案可以提高开发效率。
CORS配置的重要性
在使用<canvas>时，正确的CORS配置至关重要。确保在<img>标签中添加crossOrigin='anonymous'，并且服务器返回正确的Access-Control-Allow-Origin头，才能顺利读取画布数据。
延伸问答
什么是污染画布错误？
污染画布错误是指当从不同源加载图像到<canvas>时，浏览器阻止读取画布像素，导致canvas.toDataURL()或getImageData()等调用失败。
如何解决污染画布错误？
解决污染画布错误的方法是在<img>标签中添加crossOrigin='anonymous'，并确保服务器返回Access-Control-Allow-Origin头。
如果无法控制服务器，应该怎么办？
如果无法控制服务器，可以通过后端中转获取图像，或使用CORS代理来解决污染画布问题。
什么是CORS代理，它有什么用？
CORS代理是一种服务，可以为你注入所需的CORS头，适合静态网站或没有后端的情况。
污染画布错误的原因是什么？
污染画布错误的原因是从不同源加载图像而没有正确的CORS设置，导致浏览器将整个画布标记为“污染”。
如何在代码中设置crossOrigin属性？
在代码中，可以通过image.crossOrigin = 'anonymous';来设置crossOrigin属性，然后加载图像。
