实施

Question

我写了以下html文件：

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

thieftitle.wbmp

位于我的html附近。

html呈现这样的。 enter image description here

正如您可以看到资源加载成功但不能渲染。

我有办法解决它吗？

Answer 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>

结果

WBMP reader

注意事项

浏览器支持

这仅适用于支持canvas元素的浏览器，并且能够检索二进制数据。有关详细信息，请查看http://caniuse.com/#feat=typedarrays和http://caniuse.com/#feat=canvas。 Spoiler：这适用于IE 10及更高版本。如果您需要支持较旧的IE版本，请选择选项1。

带宽使用

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

如何在html中渲染wbmp图像？

1 个答案:

实施

结果

注意事项

浏览器支持

带宽使用