前言
在cesium项目中,Cesium 使用 canvas 渲染,如果通过传统的 billboard 等方法加载 gif 图片,往往只能渲染出第一帧,导致动画无法播放,为了解决这个问题,可以采取以下几种方法:
1.使用第三方库解析GIF:使用如 libgif 或 SuperGif 等第三方库将 GIF 解析成多帧图片,然后通过 Cesium 的 BillboardGraphics 方法,按照时间顺序更新 billboard 的图片,从而实现动画效果。
2.将HTML元素渲染到地图上:在 Cesium 的官方示例中,有一种方法是将 HTML 元素(比如一个 img 标签)渲染到地图上。通过这种方式,GIF 图可以完整加载并且动画能够正常播放。这种方法可以使用 CSS 调节页面元素的样式。(自定义html)
接下来我们主要讲的是第一种方式实现加载gif动画
一、原理
1.canvas、img、video,都是图像对象,属于图像类型的节点。这种图像对象不是Image 对象,而是对加载图像数据流的节点的统称。
img 里的图像数据来源于提前制作好图片文件的,是静止的,比如.jpg,.png,.svg 等。.gif 是个特殊存在,另当别论。
vedio 里的视频数据来源于提前制作好的视频文件,是动起来的。
canvas 图像数据是动态生成的。
2.图像对象的数据的读写
读取图像数据
img 和video 没有直接获取ImageData 的方法,但可以通过canvas 获取
canvas 使用getImageData 方法读取自身的图像数