Увеличить картинку в 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 шт):
Я решил эту проблему
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 с новыми значениями ширины и высоты