未捕获(承诺)DOMException:无法在 'WebGL2RenderingContext' 上执行 'texImage2D':可能无法加载受污染的画布
Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded
'''
<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)
以下是html文件在firefox
中打开时的错误
'''
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
'''
我是初学者,无法理解上面的错误。我试图从浏览器的控制台获取姿势坐标,但我一直收到此错误。
如有任何帮助,我们将不胜感激,并在此先致谢。
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>
我的 react 应用程序 和 tensorflow.js 也遇到了同样的问题,但我只意识到我错过了crossOrigin
edkeveked 提到的道具或属性。所以我通过修改 img
标签并将属性或 属性 crossOrigin
如下解决了我的问题:
<img crossOrigin='anonymous' ... />
edkeveked的回答是最好的
祝你好运✔✔✨✨
'''
<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)
以下是html文件在firefox
中打开时的错误'''
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
'''
我是初学者,无法理解上面的错误。我试图从浏览器的控制台获取姿势坐标,但我一直收到此错误。
如有任何帮助,我们将不胜感激,并在此先致谢。
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>
我的 react 应用程序 和 tensorflow.js 也遇到了同样的问题,但我只意识到我错过了crossOrigin
edkeveked 提到的道具或属性。所以我通过修改 img
标签并将属性或 属性 crossOrigin
如下解决了我的问题:
<img crossOrigin='anonymous' ... />
edkeveked的回答是最好的
祝你好运✔✔✨✨