英文:
Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded
问题
以下是您提供的HTML代码的翻译部分：
<!DOCTYPE html>
<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>
关于您遇到的错误，这是由于浏览器的安全策略导致的问题，涉及到在WebGL上加载带有安全性问题的图像。在Google Chrome中，错误消息是“Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded.”（在WebGL2RenderingContext上执行'texImage2D'操作失败：不能加载有问题的画布）。在Firefox中，错误消息是“SecurityError: The operation is insecure.”（安全错误：操作不安全）。
这可能是由于您加载的图像 'cat.jpg' 具有安全问题，浏览器会拒绝加载它。要解决此问题，您可以尝试以下几种方法：
-
确保图像路径正确： 确保 'cat.jpg' 图像位于与HTML文件相同的目录中，并且文件名拼写正确。
-
使用HTTPS协议： 如果您的网页是通过HTTPS协议提供的，尝试使用HTTPS链接加载图像，例如
src='https://example.com/cat.jpg'。 -
检查图像权限： 确保图像文件具有适当的权限，允许浏览器加载它。确保您没有在图像的URL中添加不必要的身份验证或安全性设置。
-
避免跨域问题： 确保图像和HTML文件位于相同的域中，以避免跨域访问问题。
-
尝试使用本地图像： 尝试将图像更改为本地计算机上的图像，而不是远程链接，以排除远程服务器问题。
如果上述方法都无法解决问题，您可能需要更详细地检查您的网络设置和浏览器安全性设置，以确保没有其他问题导致加载失败。
英文:
'''
<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>
'''
Above is html file using which I am trying out posenet from tensorflow js.
Following is the error which I received when I tried to open the above file in 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)
Following is the error when the html file is opened in 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
'''
I am a beginner and I am not able to understand the above error. I am trying to get the pose coordinates from the console in the browser but I just keep getting this error.
Any help would be appreciated and thanks in advance.
答案1
得分: 28
crossorigin='anonymous' 需要添加到图像标签中
<img id='cat' src='https://i.imgur.com/jlFgGpe.jpg' crossorigin='anonymous' />
要在本地使用图像，图像需要由允许跨域请求的服务器提供。可以使用以下命令行使用 http-server：
http-server -c1 --cors .
<img id='cat' src='http://127.0.0.1:8080/temp.png' crossorigin='anonymous' />
英文:
crossorigin='anonymous' needs to be added to the image tag
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
To use an image locally, the image needs to be served by a server allowing cors. http-server can be used with the command line
http-server -c1 --cors .
<!-- language: lang-js -->
<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>
答案2
得分: -1
我在我的React应用和TensorFlow.js中遇到了同样的问题，但我只意识到我缺少了crossOrigin属性，正如edkeveked所提到的。所以我通过修改img标签并添加crossOrigin属性来解决了我的问题，如下所示：
<img crossOrigin='anonymous' ... />
edkeveked的回答是最好的。
祝好运 ✔✔✨✨
英文:
I was having the same problem with my react app and tensorflow.js but i only realised that i was missing the crossOrigin prop or attribute as edkeveked mentioned. So i solved my problem by modifying the img tag and put the attribute or property crossOrigin as follows:
<img crossOrigin='anonymous' ... />
edkeveked's answer is the best
Good luck ✔✔✨✨
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论