CODEWITHSUNDEEP
javascriptcanvas
user6887261
user6887261

Reputation:

createImageBitmap() converts the image data into all zeros

I'm trying createImageBitmap(imgdata, 0, 0, 500, 500) , The code is as follows : 

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);
        });
}

The createImageBitmap promise resolves with a clamped array of all zeroes, but the imagedata i'm using isn't all zeroes.

What's the reason for this?

Upvotes: 1

Views: 471

Answers (1)

user1693593
user1693593

Reputation:

This line:

ctx2.drawImage(im, 500, 500);

will draw the image at position (500,500) which likely is outside the canvas area? (or at least the area you test here: console.log(ctx2.getImageData(0, 0, 500, 500).data);)

Try to change it to for example:

ctx2.drawImage(im, 0, 0);

Upvotes: 2

Related Questions