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.
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.