Clever Geek Handbook

Gradually rendering progressive images in HTML5 canvas

Is there a way to draw partially loaded progressive image objects (PNG, JPG) to canvas?

Most browsers support progressive loading in the tag, but I cannot find how this can be controlled inside the canvas.

+3


source to share


2 answers


The answer is no, according to the spec instructions.

If the browser does this, it is against the specification, which says:



If the image is not fully decoded yet, then nothing is drawn.

When the img element is in a fully accessible state and the user agent can decode the media without error, the img element is said to be fully decoded.

+3


source


You can take a look at the streamingtextures js lib , which uses custom decoding of JPEG progressive images (via Emscripten version of libjpeg) and returns the image content as a byte array.



This method is used with WebGL but can also be used for 2D canvas and extended to support GIF, PNG and WebP

+1


source






More articles:


All Articles