javascript - createImageBitmap() 将图像数据转换为全零

Question

我正在尝试 createImageBitmap(imgdata, 0, 0, 500, 500) ，代码如下:

function draw(imgi) {
    console.log('drawing');
    let data = imgi.data;
    // console.log(data); --> the data of the real image
    data = core.clip(data, 100, 210);
    // console.log(data); --> the clipped array with minimum value of 100 and maximum value of 210
    data = core.form_arr(data, 'uint8clamped');
    console.log(data); // --> Converting to Uint8Clamped array
    let img = new ImageData(data, 500, 500);
    console.log(img.data); // --> converts the clamped array into image data
    createImageBitmap(img, 0, 0, 500, 500)
        .then(im => {
            console.log(im); // --> This is where the error is the im is all zeroes clamped array
            ctx2.drawImage(im, 500, 500);
            console.log(ctx2.getImageData(0, 0, 500, 500).data);
        });
}

createImageBitmap promise 使用全零的固定数组解析，但我使用的图像数据并非全为零。

这是什么原因？

Answer 1

这一行:

ctx2.drawImage(im, 500, 500);

将在可能位于 Canvas 区域之外的位置 (500,500) 绘制图像？ (或者至少是您在此处测试的区域:console.log(ctx2.getImageData(0, 0, 500, 500).data);)

尝试将其更改为例如:

ctx2.drawImage(im, 0, 0);