javascripthtml5-canvas

Convert an image to ImageData (Uint8ClampedArray)

I have an image for example "img/Myimage.jpg" I would like to convert it to the Uint8ClampedArray format (as shown in the image). enter image description here

For what? I am using a library that after a long process converts the images to this format, but I have others images that I need to convert them on my own to this same format. how can I do it? Excuse my ignorance

var frames = animator.frames;
var res_c = document.getElementById("result");
var res_ctx = res_c.getContext('2d');
for (var x = 0; x < frames.length; x++) {
  //***frames are ImageData (Uint8ClampedArray)***
  res_ctx.putImageData(frames[x],0,0);
  console.log(frames[x])
  gif.addFrame(res_c,{copy:true,delay: 120});
}

I need convert my images in ImageData (Uint8ClampedArray) for add others frames

Solution

  • You can use Image constructor, CanvasRenderingContext2D.drawImage() and CanvasRenderingContext2D.getImageData() to create an ImageData object from an image file.

    const imageData = await new Promise((res) => {
    const image = new Image();
    image.src = /* Blob URL, "/path/to/image/served/with/cors/headers", etc. */;

    image.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = image;
        const canvas = new OffscreenCanvas(width, height);
        const ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0);
        res(ctx.getImageData(0, 0, width, height));
    };
});