未捕获（承诺）DOMException：无法在“WebGL2RenderingContext”上执行“texImage2D”：可能无法加载受污染的画布答案

【问题标题】：Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded未捕获（承诺）DOMException：无法在“WebGL2RenderingContext”上执行“texImage2D”：可能无法加载受污染的画布
【发布时间】：2020-04-21 22:46:24
【问题描述】：

'''
<html>
<head>  
<meta charset="UTF-8"> 
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
</head>

<body>
<img id='cat' src='cat.jpg '/>
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;

var imageElement = document.getElementById('cat');

posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose){
console.log(pose);
})
</script>
</html>
'''

上面是html文件，我正在使用它从tensorflow js中尝试posenet。以下是我尝试在 google chrome 中打开上述文件时收到的错误。

Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded.
at https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:176404
at qt (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:55726)
at vi (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:176377)
at t.uploadPixelDataToTexture (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:181200)
at Object.kernelFunc (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:480876)
at h (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:42226)
at https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:42907
at t.scopedRun (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:40845)
at t.runKernelFunc (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:42726)
at t.runKernel (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:41280)

以下是在firefox中打开html文件时的错误

'''
SecurityError: The operation is insecure.
Source map error: Error: request failed with status 404
Resource URL: https://cdn.jsdelivr.net/npm/@tensorflow/tfjs
Source Map URL: tf.min.js.map 
'''

我是初学者，无法理解上述错误。我正在尝试从浏览器中的控制台获取姿势坐标，但我一直收到此错误。

任何帮助将不胜感激，并提前致谢。

【问题讨论】：

标签： javascript html google-chrome firefox tensorflow.js

【解决方案1】：

crossorigin='anonymous'需要添加到图片标签

<html>

<head>
  <meta charset="UTF-8">
  <!-- Load TensorFlow.js -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  <!-- Load Posenet -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
</head>

<body>
  <img id='cat' src='https://i.imgur.com/jlFgGpe.jpg' crossorigin='anonymous' />
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
  var flipHorizontal = false;

  var imageElement = document.getElementById('cat');

  posenet.load().then(function(net) {
    const pose = net.estimateSinglePose(imageElement, {
      flipHorizontal: true
    });
    return pose;
  }).then(function(pose) {
    console.log(pose);
  })
</script>

</html>

要在本地使用图像，图像需要由允许 cors 的服务器提供服务。 http-server 可以和命令行一起使用

http-server -c1 --cors .

<html>

<head>
    <meta charset="UTF-8">
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <!-- Load Posenet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
</head>

<body>
    <img id='cat' src=' http://127.0.0.1:8080/temp.png' crossorigin="anonymous" />
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>

    var flipHorizontal = false;

    var imageElement = document.getElementById('cat');

    imageElement.crossOrigin = "Anonymous";

    posenet.load().then(function (net) {
        const pose = net.estimateSinglePose(imageElement, {
            flipHorizontal: true
        });
        return pose;
    }).then(function (pose) {
        console.log(pose);
    })
</script>

</html>

【讨论】：

你在使用crossorigin属性的时候还有同样的错误吗？
非常感谢您的回复。您提供的代码工作正常，但我需要使用系统中本地的图像。你能建议我怎么做吗？
在本地，您需要通过服务器提供图像并允许 cors
非常感谢。现在我可以使用我的本地图像了。一切正常。
如何修改上述代码以使用网络摄像头视频而不是图像。来自 githubposenet repo 的演示代码太复杂了，我不需要所有这些功能。

【解决方案2】：

我的 react app 和 tensorflow.js 遇到了同样的问题，但我只意识到我缺少 crossOrigin 属性或属性为 edkeveked 提到。所以我通过修改img标签解决了我的问题，并将属性或属性crossOrigin如下：

<img crossOrigin='anonymous' ... />

edkeveked的答案是最好的

祝你好运 ✔✔✨✨

【讨论】：