DOMException：无法在“WebGL2RenderingContext”上执行“texImage2D”：可能无法加载受污染的画布

Question

我在该网站上使用 ShortPixel CDN 解决方案时遇到以下错误：https://worksite.artonice.com/

Chrome：THREE.WebGLState：DOMException：无法在“WebGL2RenderingContext”上执行“texImage2D”：可能无法加载受污染的画布。 FireFox：THREE.WebGLState：DOMException：操作不安全。

当顶部的滑块有动画并且图像是从 CDN 而不是本地获取时，就会发生这种情况。 CDN镜像是这样的：

https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://worksite.artonice.com/wp-content/uploads/2022/10/artonice_DSC6199_k.jpg

我搜索过类似的文章，都提到了 CORS 问题，但他的 CDN 资源具有正确的 CORS 标头：

access-control-allow-origin: *

我还尝试将

crossorigin="anonymous"

添加到幻灯片的图像标签（通过在执行 JS 之前手动修改它们） ，因为它们是由 WP 插件生成的）但这并没有解决。

可能是什么问题？

谢谢！

Answer 1

您看到的 CORS 错误 发生是因为 3.27.0 版本中 Flutter Web 从 HTML 渲染器 切换到 CanvasKit。 CanvasKit 不会自动处理 CORS 标头，这会导致从外部源加载图像时出现问题。

解决方案：

1. 确保在托管图像的服务器上设置 CORS 标头（例如，

   Access-Control-Allow-Origin: *

   ）。

2. 使用

   Image.network()

   进行正确的错误处理，如下所示：

   Image.network(
     path,
     height: height,
     width: width,
     fit: fit,
     loadingBuilder: (context, child, loadingProgress) {
       if (loadingProgress == null) {
         return child;
       } else {
         return Center(child: CircularProgressIndicator());
       }
     },
     errorBuilder: (context, error, stackTrace) {
       return Image.asset('assets/placeholder.png');
     },
   );
   

Flutter Web 渲染器：

• HTML 渲染器：使用标准 HTML 和 CSS，自动处理 CORS。
• CanvasKit 渲染器：使用 WebAssembly 并需要正确的 CORS 图像标头。

切换到 CanvasKit 可能需要更改服务器端来处理 CORS。