Menu
'''
<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.
276
Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. After some research I got know that it was not a bug in any of the libraries I used, It was a limitation to prevent unauthorized use of external usage of images in canvas in HTML5.
Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data. Unable to apply filter.
Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Below is the detailed exception error message. Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
crossorigin='anonymous' needs to be added to the image tag
<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>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 .
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
