经纬志
首页 / OpenLayers / 使用示例

从 Blob 挂载影像

用 canvas 生成 PNG 并转成 Blob,再通过 objectURL 交给 ImageStatic;释放 Blob 后图层源被移除。

OpenLayers 10.3.1 · 对应官方 cog-blob.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

canvas.toBlob() 回调拿到二进制 PNG,用 URL.createObjectURL() 换成浏览器内部地址,交给 ol.source.ImageStatic 就能当作影像图层显示。 这条链路的优点是全程不经过服务器。

objectURL 会一直占用对应内存,直到 revokeObjectURL() 或页面刷新。 示例在重新生成前先释放旧地址,并把「释放」按钮单独做出来,方便观察图层被移除的效果。

操作结果
点击「生成影像 Blob」影像出现在地图上,状态栏给出大小与类型
再次点击旧 objectURL 被释放,新影像替换旧影像
点击「释放 Blob」图层源被置空,影像消失

生成过程中不要立刻 revoke:图片解码是异步的,过早释放会让图层拿到一个失效地址。