Javascript / DOMImageObject ondata事件

时间:2012-09-13 00:09:45

标签: javascript html5 canvas

是否有可能(或有技术)为 DOM图像元素获取image.ondata事件客户端? Aka,类似于onload

问题背景
标准'jpeg渲染到浏览器图像元素从上到下,一次像素行。玩这个会很有趣:向下滑动动画;在时间画块。

可能的解决方案
从服务器获取base64或二进制数据并在Canvas元素上呈现。还有其他想法吗?任何人都会在*之前做到这一点吗?

*是的,这是作弊,但如果你已经这样做了,它会省去我重新发明轮子。

1 个答案:

答案 0 :(得分:1)

我知道在图像数据到达时无法对图像进行自定义渐进式渲染。您可以做的是让图像不显示,等待整个图像被加载(通过onload事件),然后自定义显示图像。

可以通过多种方式完成自定义显示,例如可用于浏览器的许多基于javascript / CSS的幻灯片。

  1. CSS过渡可用于执行各种渲染(在现代浏览器中)。 IE有自己的一组过滤器转换,可以在IE中使用(因为它还没有CSS3转换)。
  2. 可以使用图像的大小调整和图像上方对象的移动/大小调整来构建基于Javascript的过渡。例如,你可以做幻灯片,擦拭巾,百叶窗等......
  3. 您可以使用画布自行绘制图像的任何部分。