I'm trying to create a webpage where I can select and display a local image, alongside a prediction made by a TensorFlow model. To feed the image to the model it needs to be in a tensor with values for each pixel. How can I convert the image to a tensor of pixel values? The example code is below.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.7.0"> </script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.5.1/dist/tfjs-vis.umd.min.js"></script>
<title>display image</title>
</head>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)">
<p id="result">Prediction </p>
<p><img id="output" width="200"/></p>
<script>
var loadFile = function(event) {
var image = document.getElementById('output');
image.src=URL.createObjectURL(event.target.files[0]);
};
//Some method to convert the image into a tensor
</script>
</body>
</html>
Did you check tf.browser.fromPixels ?
image.onload = () => {
const imgTensor = tf.browser.fromPixels(image);
...
}