BMP在JavaScript中解码并绘制到Explorer Canvas
-
28-09-2019 - |
题
我需要在Internet Explorer中下载带有JavaScript的BMP并将其渲染到屏幕上。首先,是的,是的,我知道这很疯狂,我不会了解为什么,让我们暂时接受IMG SRC由于安全限制而无法正常工作,但是在帖子中具有适当身份验证的AJAX请求将拉回图像。此示例为了简单起见,绕过了所有安全性,只是证明了我们可以呈现一些东西。
我能想到的最好的想法是通过Ajax获取流,解码位图,然后用画布渲染。 Internet Explorer显然不支持帆布,但是幸运的是,Google为SVG提供了一个名为Excanvas的包装器,我可以使用它。
我的代码(绘图代码似乎有效,BMP解码不多)
除了BMP之外,对其他图像的未来支持是可观的,并且由于画布的工作原理,最容易在RGBA绘制像素。 Texture2D本质上是RGBA字节数组以及图形代码的包装类。字节流使与字节数组的眼睛更容易,而BitMapDecoder包含将BGR格式转换为RGBA纹理2D的方法。
在此过程中,字节是否可能被错误翻译,还是我的解码逻辑有什么问题?
仅供参考,我从Wikipedia获得了文件规格:
http://en.wikipedia.org/wiki/bmp_file_format#bitmap_information_.28dib_header.29
任何想法在解码逻辑或绘制逻辑中发生了什么,导致我的BMP绘制错误?
解决方案 3
解决方案是两件事的组合
- 正如Wikipedia文章所暗示的那样,正确解码字节数据并未填充每个像素,实际上,每个扫描线都被填充到dword大小。
工作代码:
其他提示
XMLHttpRequest
(又名Ajax)主要是为文本内容设计的,因此二进制数据(尤其是空字符)可能无法正确翻译。第一次检查是将检索到的数据的大小与实际文件大小进行比较。
至少在Firefox上,似乎有一种特殊检索二进制数据的方法,如下所述: 处理二进制数据.
这是一种更容易(性能更大)的方法:base64编码BMP数据(您可以在服务器或客户端上执行此操作),然后使用A嵌入页面 数据URI:
<script type="text/javascript">
function fetchBmp() {
$.get('http://localhost:3168/experimental/imgrender/beta.bmp', function (data) {
var base64Data = $.base64.encode(data); // *
$('#my-image').attr('src', 'data:image/bmp;base64,' + base64Data);
});
}
// * Lots of plugins for this, e.g. http://github.com/carlo/jquery-base64
</script>
<img id="my-image" />
所有现代浏览器都支持数据URI(包括IE8和UP-FOR-FOR-FOR-IE7解决方法)以及BMP格式。
正如卡萨布兰卡(Casablanca)指出的那样,通过AJAX加载二进制数据可能存在问题,因此您可能必须在Google周围进行解决方案。