Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded

huangapple
go评论122阅读模式
英文:

Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded

问题

以下是您提供的HTML代码的翻译部分：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>  
  4. <meta charset="UTF-8"> 
  5. <!-- Load TensorFlow.js -->
  6. <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  7. <!-- Load Posenet -->
  8. <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
  9. </head>
  11. <body>
  12. <img id='cat' src='cat.jpg' />
  13. </body>
  14. <!-- Place your code in the script tag below. You can also use an external .js file -->
  15. <script>
  16. var flipHorizontal = false;
  18. var imageElement = document.getElementById('cat');
  20. posenet.load().then(function(net) {
  21. const pose = net.estimateSinglePose(imageElement, {
  22. flipHorizontal: true
  23. });
  24. return pose;
  25. }).then(function(pose){
  26. console.log(pose);
  27. })
  28. </script>
  29. </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' 具有安全问题，浏览器会拒绝加载它。要解决此问题，您可以尝试以下几种方法：

  1. 确保图像路径正确： 确保 'cat.jpg' 图像位于与HTML文件相同的目录中，并且文件名拼写正确。

  2. 使用HTTPS协议： 如果您的网页是通过HTTPS协议提供的，尝试使用HTTPS链接加载图像，例如 src='https://example.com/cat.jpg'。

  3. 检查图像权限： 确保图像文件具有适当的权限，允许浏览器加载它。确保您没有在图像的URL中添加不必要的身份验证或安全性设置。

  4. 避免跨域问题： 确保图像和HTML文件位于相同的域中，以避免跨域访问问题。

  5. 尝试使用本地图像： 尝试将图像更改为本地计算机上的图像，而不是远程链接，以排除远程服务器问题。

如果上述方法都无法解决问题，您可能需要更详细地检查您的网络设置和浏览器安全性设置，以确保没有其他问题导致加载失败。

英文: 
  1. &#39;&#39;&#39;
  2. &lt;html&gt;
  3. &lt;head&gt;  
  4. &lt;meta charset=&quot;UTF-8&quot;&gt; 
  5. &lt;!-- Load TensorFlow.js --&gt;
  6. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow/tfjs&quot;&gt;&lt;/script&gt;
  7. &lt;!-- Load Posenet --&gt;
  8. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet&quot;&gt;&lt;/script&gt;
  9. &lt;/head&gt;
  11. &lt;body&gt;
  12. &lt;img id=&#39;cat&#39; src=&#39;cat.jpg &#39;/&gt;
  13. &lt;/body&gt;
  14. &lt;!-- Place your code in the script tag below. You can also use an external .js file --&gt;
  15. &lt;script&gt;
  16. var flipHorizontal = false;
  18. var imageElement = document.getElementById(&#39;cat&#39;);
  20. posenet.load().then(function(net) {
  21. const pose = net.estimateSinglePose(imageElement, {
  22. flipHorizontal: true
  23. });
  24. return pose;
  25. }).then(function(pose){
  26. console.log(pose);
  27. })
  28. &lt;/script&gt;
  29. &lt;/html&gt;
  30. &#39;&#39;&#39;

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.

  1. Uncaught (in promise) DOMException: Failed to execute &#39;texImage2D&#39; on &#39;WebGL2RenderingContext&#39;: Tainted canvases may not be loaded.
  2. at https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:176404
  3. at qt (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:55726)
  4. at vi (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:176377)
  5. at t.uploadPixelDataToTexture (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:181200)
  6. at Object.kernelFunc (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:480876)
  7. at h (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:42226)
  8. at https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:42907
  9. at t.scopedRun (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:40845)
  10. at t.runKernelFunc (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:42726)
  11. at t.runKernel (https://cdn.jsdelivr.net/npm/@tensorflow/tfjs:2:41280)

Following is the error when the html file is opened in firefox

  1. &#39;&#39;&#39;
  2. SecurityError: The operation is insecure.
  3. Source map error: Error: request failed with status 404
  4. Resource URL: https://cdn.jsdelivr.net/npm/@tensorflow/tfjs
  5. Source Map URL: tf.min.js.map 
  6. &#39;&#39;&#39;

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=&#39;anonymous&#39; 需要添加到图像标签中

  1.     <img id='cat' src='https://i.imgur.com/jlFgGpe.jpg' crossorigin='anonymous' />

要在本地使用图像，图像需要由允许跨域请求的服务器提供。可以使用以下命令行使用 http-server：

  1. http-server -c1 --cors .
  1.     <img id='cat' src='http://127.0.0.1:8080/temp.png' crossorigin='anonymous' />
英文:

crossorigin=&#39;anonymous&#39; needs to be added to the image tag

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;html&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;!-- Load TensorFlow.js --&gt;
  6.   &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow/tfjs&quot;&gt;&lt;/script&gt;
  7.   &lt;!-- Load Posenet --&gt;
  8.   &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet&quot;&gt;&lt;/script&gt;
  9. &lt;/head&gt;
  11. &lt;body&gt;
  12.   &lt;img id=&#39;cat&#39; src=&#39;https://i.imgur.com/jlFgGpe.jpg&#39; crossorigin=&#39;anonymous&#39; /&gt;
  13. &lt;/body&gt;
  14. &lt;!-- Place your code in the script tag below. You can also use an external .js file --&gt;
  15. &lt;script&gt;
  16.   var flipHorizontal = false;
  18.   var imageElement = document.getElementById(&#39;cat&#39;);
  20.   posenet.load().then(function(net) {
  21.     const pose = net.estimateSinglePose(imageElement, {
  22.       flipHorizontal: true
  23.     });
  24.     return pose;
  25.   }).then(function(pose) {
  26.     console.log(pose);
  27.   })
  28. &lt;/script&gt;
  30. &lt;/html&gt;

<!-- 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

  1. http-server -c1 --cors .

<!-- language: lang-js -->

  1. &lt;html&gt;
  3. &lt;head&gt;
  4.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.     &lt;!-- Load TensorFlow.js --&gt;
  6.     &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow/tfjs&quot;&gt;&lt;/script&gt;
  7.     &lt;!-- Load Posenet --&gt;
  8.     &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet&quot;&gt;&lt;/script&gt;
  9. &lt;/head&gt;
  11. &lt;body&gt;
  12.     &lt;img id=&#39;cat&#39; src=&#39; http://127.0.0.1:8080/temp.png&#39; crossorigin=&quot;anonymous&quot; /&gt;
  13. &lt;/body&gt;
  14. &lt;!-- Place your code in the script tag below. You can also use an external .js file --&gt;
  15. &lt;script&gt;
  17.     var flipHorizontal = false;
  19.     var imageElement = document.getElementById(&#39;cat&#39;);
  21.     imageElement.crossOrigin = &quot;Anonymous&quot;;
  23.     posenet.load().then(function (net) {
  24.         const pose = net.estimateSinglePose(imageElement, {
  25.             flipHorizontal: true
  26.         });
  27.         return pose;
  28.     }).then(function (pose) {
  29.         console.log(pose);
  30.     })
  31. &lt;/script&gt;
  33. &lt;/html&gt;

答案2

得分: -1

我在我的React应用和TensorFlow.js中遇到了同样的问题，但我只意识到我缺少了crossOrigin属性，正如edkeveked所提到的。所以我通过修改img标签并添加crossOrigin属性来解决了我的问题，如下所示：

  1. &lt;img crossOrigin=&#39;anonymous&#39; ... /&gt;

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:

  1. &lt;img crossOrigin=&#39;anonymous&#39; ... /&gt;

edkeveked's answer is the best

Good luck ✔✔✨✨

huangapple
  • 本文由 发表于 2020年1月3日 19:01:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/59577407.html
  • firefox
  • google-chrome
  • html
  • javascript
  • tensorflow.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定