如何在 html 内渲染 wbmp 图像？

Question

我写了以下 html 文件：

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

thieftitle.wbmp

位于我的 html 附近。

html 渲染成这样。

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

有办法解决吗？

Answer 1

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

在 server-side 上转换图像并将 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 and http://caniuse.com/#feat=canvas 了解详情。剧透：这适用于 IE 10 及更高版本。如果您需要支持较旧的 IE 版本，请选择选项 1。

带宽使用

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

如何在 html 内渲染 wbmp 图像？

How to render wbmp image within html?

html

image

rendering

实施

结果

注意事项

浏览器支持

带宽使用