Tensorflow.js: Resize image to specific byte size - image

Question

For the prediction I need an image of the shape [null,7,7,256].
const image = tf.reshape(tf.fromPixels(loadedImage).resizeBilinear([?,?]), [null, 7, 7, 256]);
But I don't know how to resize the image to be exactly 7*7*256 big.
Error: Size(37632) must match the product of shape ,7,7,256
Edit: The code for the prediction is:
tf.loadModel(tf.io.browserFiles([uploadJSONInput.files[0], uploadWeightsInput.files[0]])).then(model => {
console.log("model loaded");
return model;
}).then(pretrainedModel => {
return loadImage2('http://localhost/myimg.jpeg', (src) => {
const loadedImage = document.createElement("img");
loadedImage.src = src;
loadedImage.width = "275"
loadedImage.height = "183"
console.log("image loaded");
const image = tf.fromPixels(loadedImage)
resized = tf.image.resizeBilinear(image, [7, 7])
const padded = resized.pad([[0, 0], [0, 0], [126, 127]])
const pretrainedModelPrediction = pretrainedModel.predict(padded);
const modelPrediction = model.predict(pretrainedModelPrediction);
const prediction = modelPrediction.as1D().argMax().dataSync()[0];
console.log(prediction);
});
})
Error:
Error: Error when checking : expected flatten_Flatten1_input to have 4 dimension(s), but got array with shape [7,7,256]

Answer 1

ResizeBilinear will resize the height and the width of the image, meaning that it does not affect the number of channel which is the last dimension of the shape of an image.
If your image has 256 as it last channel, then the following will work
tf.fromPixels(loadedImage).resizeBilinear([7,7])
Reshaping a tensor will only work if both sizes matches.
const image = tf.ones([183, 275, 3 ])
resized = tf.image.resizeBilinear(image, [7, 7])
console.log(resized.pad([[0, 0], [0, 0], [126, 127]]).shape);
An image is generally of shape [h, w, 3].
resize = tf.fromPixels(loadedImage).resizeBilinear([7,7]) // [7, 7, 3]
And then use tf.pad for the last dimension
const image = tf.ones([183, 275, 3 ])
resized = tf.image.resizeBilinear(image, [7, 7])
console.log(resized.pad([[0, 0], [0, 0], [126, 127]]).shape);// [7,7,256]
// reshape the tensor to be a 4d
resized.reshape([1,7,7,256])

Answer 2

Here's how to do it with a Uint8Array
const canvas: any = document.getElementById('canvas')
const context = canvas.getContext('2d')
const imageData: ImageData = context.getImageData(0, 0, canvas.width, canvas.height)
const uint8array = new Uint8Array(imageData.data.buffer)
const rgbaTens3d = tf.tensor3d(uint8array, [canvas.height, canvas.width, 4])
const rgbTens3d= tf.slice3d(rgbaTens3d, [0, 0, 0], [-1, -1, 3]) // strip alpha channel
const smallImg = tf.image.resizeBilinear(rgbTens3d, [192, 192]); // 192,192 is dictated by my model