ImageResource API proposal

APIs
1

Hello. I thinking about browser API for custom images.

  • Creating image without delay and latency

  • Creating custom frame-by-frame animation

  • Usage of ImageData objects, from canvas

  • Using as image resources, for example <img> tag, or CSS content

Example:

//Main class
class ImageResource {
  constructor(){
    this.isAnimation = false;
  }
  setImageData(data<ImageData>){}
  getImageData(){}
  getAnimationFrame(index){}
  setAnimationFrame(index, frame<ImageResourceFrame>){}
  toImageURL(){}
  get width(){}
  get height(){}
}

//For animation
class ImageResourceFrame(){
  constructor(){
     this.offsetX = 0;
     this.offsetY = 0;
  }
  getImageData(){}
  setImageData(data<ImageData>){}
  get width(){}
  get height(){}
}
2

How is this different from just using an array of ImageData? You can also display an ImageData in an image element if you convert it to a blob first.

3

Directly won’t work

Should be visible second rectangle

I tried all: ImageBitmap, ImageData, Blob, etc. raw image data can’t be shown.

4

Try putting the ImageData in a canvas and calling canvas.toBlob(). Then you can create a URL to that blob and display it.

5

I think better low level API…

6

Why? You need to provide a set of compelling use cases as to why this is better than the existing solutions for anyone to consider it.

7

I have few examples:

  • Custom CSS background image animation. With ImageResource possible stream animation from canvas to CSS.

  • Custom animated images, that decompiled from APNG/WebP or any other by JavaScript.

8

Using canvas in CSS is supported by CSS4 element(), but AFAIK no browsers support it yet. For custom animated images TBH I think there’s too much overlap with ImageData or ImageBitmap for this to be worthwhile, especially since if you can use a canvas in CSS, you could just animate with that.