【问题标题】：How to render wbmp image within html?如何在 html 中呈现 wbmp 图像？
【发布时间】：2015-01-24 13:35:50
【问题描述】：

我写了以下html文件：

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

小偷标题.wbmp

位于我的 html 附近。

html 是这样渲染的。

如您所见，资源加载成功但未渲染。

有办法解决吗？

【问题讨论】：

您确认任何浏览器都支持这种格式吗？快速的谷歌搜索表明它在 Chrome 中不受支持，并且在 Firefox 中实现的功能请求被关闭为“wontfix”。还有一些建议是，任何支持该格式的努力都已从 Gecko 中完全删除。您可能只需要为图像使用更广泛支持的格式
我试过 Opera IE chrome 和 firefox。

标签： html image rendering

【解决方案1】：

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

在服务器端转换图像并将 GIF 或 PNG 发送到客户端
在 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 和http://caniuse.com/#feat=canvas。剧透：这适用于 IE 10 及更高版本。如果您需要支持较旧的 IE 版本，请选择选项 1。

带宽使用率

WBMP 未压缩并浪费带宽。根据您要达到的目标，选择选项 1 可能更便宜。

【讨论】：

我编辑了我的帖子，因为我注意到我的第一个实现导致浏览器解析 WBMP 并在它被 JavaScript 库处理之前失败。这就是为什么我决定以编程方式创建img。