Function constructImageData

extract the ImageData from an image source (of type CanvasImageSource), with optional cropping.

due to the fact that this function utilizes a Canvas/OffscreenCanvas, it is important to note that the output ImageData is sometimes lossy in nature. this is because gpu-accelerated web-browsers approximate the colors (i.e. you don't truly get 256^3 unique colors), and also due to rounding errors from/to internal float-valued colors and output integer-valued colors.

but generally speaking, the ImageData can be lossless if all of the following are satisfied:

  • disable gpu-acceleration of your web-browser, through the flags page ("chrome://flags" or "about:config").
  • your img_src has either no alpha-channel, or 100% visible alpha-channel throughout (i.e. non-transparent image).
  • you have pre-multiplied alpha disabled (TODO: this part can be achieved/implemented by this library, but I haven't looked into it yet.). check out this script for using webgl for reading and writing bitmap pixels without losing color accuracy due to alpha premultiplication
  • constructImageData(
        img_src: AnyImageSource,
        width?: number,
        crop_rect?: Rect,
        bitmap_options?: ImageBitmapOptions,
        image_data_options?: ImageDataSettings,
    ): Promise<ImageData>

    Parameters

    • img_src: AnyImageSource

      an image source can be an HTMLImageElement, HTMLCanvasElement, ImageBitmap, etc..

    • Optionalwidth: number
    • Optionalcrop_rect: Rect

      dimension of the cropping rectangle. leave as undefined if you wish not to crop, or only provide a partial Rect

    • Optionalbitmap_options: ImageBitmapOptions
    • Optionalimage_data_options: ImageDataSettings

    Returns Promise<ImageData>

Settings

Member Visibility