Увеличить картинку в 2 раза с помощью WebAssembly

Подскажите как правильно мне увеличить разрешение картинки, картинка считывается с одного canvas, потом берутся байты и отсылаются на модуль WASM и там берется пиксель и копируется дважды, когда этот модуль отработал возвращается новый массив пикселей и вставляется во второй canvas. В результате должна получится новая картинка с увеличенным width и heigth.

Здесь происходит выделение памяти:

upload.addEventListener('change', e => {
             img.src = URL.createObjectURL(e.target.files[0]);
             img.onload = () =>{
                 canvas.width = img.width;
                 canvas.height = img.height;
                 context.drawImage(img, 0,0);
                 imageData = context.getImageData(0,0, canvas.width, canvas.height);

                 const bytePerImage = img.width * img.height * PIXELS_BYTE;
                 const minMemSize = bytePerImage * 3;
                 if(memory.buffer.byteLength < minMemSize){
                     const pagesNeeded = Math.ceil(minMemSize/PAGES);
                     memory.grow(pagesNeeded);
                 }

                 new Uint8ClampedArray(memory.buffer, 0).set(imageData.data);

                 console.log(memory.buffer.byteLength);

             };
         });

Здесь происходить передача новых байтов во второй canvas.

const canvasTest = document.getElementById("testCanvas");
             const contextTestCanvas = canvasTest.getContext('2d');

             canvasTest.width = img.width * 2;
             canvasTest.height = img.height * 2;

             instance.exports.Zoom(img.width,img.height);
            console.log(memory.buffer.byteLength)
             const resultTest = new Uint8ClampedArray(
                 memory.buffer,
                 img.width*img.height*PIXELS_BYTE,
                 img.width*img.height*PIXELS_BYTE);

            console.log(resultTest.byteLength);
             contextTestCanvas.putImageData(new ImageData(resultTest, img.width, img.height), 0, 0);

И сам код который преобразовывается у WASM:

export function Zoom(width: i32, height:i32): void {
    let offset = width * height * BYTE_PER_IMAGE;
    let i = 0;

    let d1Start = 0;
    let d1Limit = width;
    let d1Advance = 1;
    let d1Multiplier = 1;
    let d2Start = 0;
    let d2Limit = height;
    let d2Advance = 1;
    let d2Multiplier = width;

    for(let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance){
        for(let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1+=d1Advance) {
            let in_idx = ((d1 * d1Multiplier) + (d2 * d2Multiplier));
            store<u32>(offset + i * BYTE_PER_IMAGE, load<u32>(in_idx * BYTE_PER_IMAGE));
            i += 1;
            store<u32>(offset + i * BYTE_PER_IMAGE, load<u32>(in_idx * BYTE_PER_IMAGE));
            i += 1;
        }
    }
}

Вот результат нажатия на кнопку Zoom Результат


Ответы (1 шт):

Автор решения: grushik

Я решил эту проблему

const resultTest = new Uint8ClampedArray(
                 memory.buffer,
                 img.width*img.height*PIXELS_BYTE,
                 (img.width*img.height*PIXELS_BYTE) * 4);

Второй параметр конструктора, это то откуда мы берем байты, третий параметр по куда мы берем байты

contextTestCanvas.putImageData(new ImageData(resultTest, canvasTest.width, canvasTest.height), 0, 0);

и потом передаем новые байты в canvas с новыми значениями ширины и высоты

→ Ссылка