简体繁体 English

逐步渲染HTML5画布中的渐进式图像

[英]Gradual Rendering of Progressive Images in HTML5 Canvas

原文 2013-01-31 20:47:22 8 2 javascript/ html5/ canvas/ png/ progressive

Is there a way to draw partially loaded progressive Image objects (PNG, JPG) into canvas? 有没有办法将部分加载的渐进式图像对象（PNG，JPG）绘制到画布中？

Most browsers support progressive loading in the tag, but I can't find how it can be controlled in within canvas. 大多数浏览器都支持标记中的渐进式加载，但我无法找到如何在画布中控制它。

2 个解决方案

The answer is no, as per the specification's orders. 答案是否定的，按照规范的顺序。

If a browser does happen to do this, it is against the spec, which states: 如果浏览器确实碰巧这样做，那就违反了规范，该规范指出：

If the image isn't yet fully decoded, then nothing is drawn. 如果图像尚未完全解码，则不会绘制任何内容。

When an img element is in the completely available state and the user agent can decode the media data without errors, then the img element is said to be fully decodable. 当img元素处于完全可用状态并且用户代理可以无错误地解码媒体数据时，则认为img元素是完全可解码的。

You can take a look at streamingtextures js lib which use custom decoding of progressive JPEG images (via Emscripten version of libjpeg) and return image content as an array of bytes. 您可以查看使用渐进式JPEG图像的自定义解码（通过Emscripten版本的libjpeg）并将图像内容作为字节数组返回的streamingtextures js lib 。

This method is used with WebGL but could be also used for 2D canvas and extended to support also GIF, PNG and WebP 此方法与WebGL一起使用，但也可用于2D画布，并扩展为支持GIF，PNG和WebP