Opting to delegate the pixel calculations to a WebAssembly module could significantly improve the performance when working with large images, as relying solely on JavaScript may result in slower processing.
I am unclear about the functionalities present in your code.
Initially, you are rendering an unknown-sized .jpg onto a 1000x1000 canvas, which may lead to scaling and distortion of the image if the .jpg is not also 1000x1000 in size.
let width=1000;
let height=1000;
context.drawImage(img, 0, 0, width, height);
Subsequently, you are extracting pixel data from a 100x100 area at the top-left corner of your 1000x1000 canvas.
let img_w=100;
let img_h=100;
img.width=img_w;
img.height=img_h;
scannedimg = context.getImageData(0, 0, img.width, img.height);
Lastly, within your redraw() function, you are randomly setting some pixels to black and attempting to draw it back to the canvas at 1000x1000, which needs a different approach (to be discussed later).
Let's consider an alternative approach. For instance, assuming we have a 300x200 image, the initial step would involve drawing it onto a 100x100 canvas while preserving its aspect ratio to obtain the 100x100 imagedata.
This can be achieved using an off-screen dynamically created <canvas> element that does not necessitate display.
The challenging aspect lies in the CanvasRenderingContext2D putImageData() method. It seems like you assumed that the last pair of parameters specifying the width & height would stretch the existing pixel data to fill the specified region (x, y, width, height). However, this is not the case. Instead, we must once again paint the 100x100 pixel data onto a same-sized off-screen canvas (or reuse the existing one for simplicity) and then draw it onto the final canvas using the drawImage() method.
All these steps can be combined as follows:
let pixelsWidth = 100;
let pixelsHeight = 100;
let finalWidth = 500;
let finalHeight = 500;
let tempCanvas = document.createElement('canvas');
let tempContext = tempCanvas.getContext('2d');
tempCanvas.width = pixelsWidth;
tempCanvas.height = pixelsHeight;
let pixelData;
let img = new Image();
img.crossOrigin = 'anonymous';
img.onload = (e) => {
let scale = e.target.naturalWidth >= e.target.naturalHeight ? pixelsWidth / e.target.naturalWidth : pixelsHeight / e.target.naturalHeight;
let tempWidth = e.target.naturalWidth * scale;
let tempHeight = e.target.naturalHeight * scale;
tempContext.drawImage(e.target, pixelsWidth / 2 - tempWidth / 2, pixelsHeight / 2 - tempHeight / 2, tempWidth, tempHeight);
pixelData = tempContext.getImageData(0, 0, pixelsWidth, pixelsHeight);
redraw();
}
img.src = 'https://picsum.photos/id/237/300/200';
function redraw() {
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
canvas.width = finalWidth;
canvas.height = finalHeight;
tempContext.putImageData(pixelData, 0, 0);
context.drawImage(tempCanvas, 0, 0, finalWidth, finalHeight);
}
canvas {
background: #cccccc;
}
<canvas id="canvas"></canvas>