如何在 html 内渲染 wbmp 图像?

How to render wbmp image within html?

我写了以下 html 文件:

<!DOCTYPE html>
<html>
<body>

<img src="thieftitle.wbmp" alt="W3Schools.com" width="104" height="142">

</body>
</html>

thieftitle.wbmp

位于我的 html 附近。

html 渲染成这样。

如您所见,资源加载成功但未呈现。

有办法解决吗?

我不知道为什么现在人们会使用 WBMP,但你可能有你的理由——所以我们开始吧。正如@Clive 已经指出的那样,浏览器不支持这种格式,因此我们有两个选择:

  1. 在 server-side 上转换图像并将 GIF 或 PNG 发送到客户端
  2. 解码 JavaScript 中的图像并将像素写入 canvas 元素

我会专注于选项 2。

实施

获取此库:https://github.com/andreasgal/wbmp.js

(或者自己写解码器,这不是火箭科学)

<body>
    <div id="image-container"></div>
    <script src="wbmp.js"></script>
    <script>
        (function () {
            var img = document.createElement('img');
            WBMP.decode(img, 'test.wbmp');
            document.getElementById('image-container').appendChild(img);
        }());
    </script>
</body>

结果

注意事项

浏览器支持

这仅适用于支持 canvas 元素并能够检索二进制数据的浏览器。检查 http://caniuse.com/#feat=typedarrays and http://caniuse.com/#feat=canvas 了解详情。剧透:这适用于 IE 10 及更高版本。如果您需要支持较旧的 IE 版本,请选择选项 1。

带宽使用

WBMP 未压缩且浪费带宽。根据您想要实现的目标,选择选项 1 可能更便宜。