ImageResource API proposal

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(){}
}

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.

Directly won’t work

Should be visible second rectangle

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

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

I think better low level API…

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.

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.

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.