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


//Main class
class ImageResource {
    this.isAnimation = false;
  setAnimationFrame(index, frame<ImageResourceFrame>){}
  get width(){}
  get height(){}

//For animation
class ImageResourceFrame(){
     this.offsetX = 0;
     this.offsetY = 0;
  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.