[Python] Image preprocessing in pure JS that is functionally identical to Torchvision's...

I am trying to rewrite the following Python function in pure JS. The second function example is done in NodeJS but with as much plain JS as possible, because I wish to also run it in the browser.

from PIL import Image
import numpy as np
from torchvision import transforms

def preprocess_image(image_path, img_size=224):
image = Image.open(image_path).convert('RGB')

transform = transforms.Compose([
transforms.Resize(img_size, interpolation=transforms.InterpolationMode.BICUBIC),
transforms.CenterCrop(img_size),
transforms.ToTensor(),
transforms.Normalize(mean=[0.485, 0.456, 0.406],std=[0.229, 0.224, 0.225])
])

tensor = transform(image).unsqueeze(0)
return tensor.numpy().astype(np.float32)


So the goal is to take image input and resize the smallest size to 224, then do a center crop of 224x224 and normalize it. Below is an attempt at doing the same in JS, but the preprocessed image is sadly quite a bit different.

const { createCanvas, loadImage } = require('canvas');

async function preprocessImage(imagePath, size = 224) {
const image = await loadImage(imagePath);
const scale = Math.max(size / image.width, size / image.height);
const w = Math.round(image.width * scale);
const h = Math.round(image.height * scale);

// resize
const tempCanvas = createCanvas(w, h);
const ctx = tempCanvas.getContext('2d');
ctx.drawImage(image, 0, 0, w, h);

// enter crop 224x224
ctx.drawImage(
tempCanvas,
(w - size) / 2, (h - size) / 2, size, size,
0, 0, size, size
);

const { data } = ctx.getImageData(0, 0, size, size);

// normalize
const mean = [0.485, 0.456, 0.406];
const std = [0.229, 0.224, 0.225];
const floatData = new Float32Array(3 * size * size);

for (let i = 0; i < size * size; i++) {
for (let c = 0; c < 3; c++) {
const pixel = data[i * 4 + c] / 255; // normalize to [0,1]
floatData[c * size * size + i] = (pixel - mean[c]) / std[c];
}
}

return floatData;
}

Continue reading...