BMP在JavaScript中解码并绘制到Explorer Canvas

Question

我需要在Internet Explorer中下载带有JavaScript的BMP并将其渲染到屏幕上。首先，是的，是的，我知道这很疯狂，我不会了解为什么，让我们暂时接受IMG SRC由于安全限制而无法正常工作，但是在帖子中具有适当身份验证的AJAX请求将拉回图像。此示例为了简单起见，绕过了所有安全性，只是证明了我们可以呈现一些东西。

我能想到的最好的想法是通过Ajax获取流，解码位图，然后用画布渲染。 Internet Explorer显然不支持帆布，但是幸运的是，Google为SVG提供了一个名为Excanvas的包装器，我可以使用它。

我的代码（绘图代码似乎有效，BMP解码不多）

http://gist.github.com/614328

除了BMP之外，对其他图像的未来支持是可观的，并且由于画布的工作原理，最容易在RGBA绘制像素。 Texture2D本质上是RGBA字节数组以及图形代码的包装类。字节流使与字节数组的眼睛更容易，而BitMapDecoder包含将BGR格式转换为RGBA纹理2D的方法。

在此过程中，字节是否可能被错误翻译，还是我的解码逻辑有什么问题？

仅供参考，我从Wikipedia获得了文件规格：

http://en.wikipedia.org/wiki/bmp_file_format#bitmap_information_.28dib_header.29

任何想法在解码逻辑或绘制逻辑中发生了什么，导致我的BMP绘制错误？

Answer 1

解决方案是两件事的组合

2. 正如Wikipedia文章所暗示的那样，正确解码字节数据并未填充每个像素，实际上，每个扫描线都被填充到dword大小。

工作代码：

http://gist.github.com/616240

Answer 2

XMLHttpRequest （又名Ajax）主要是为文本内容设计的，因此二进制数据（尤其是空字符）可能无法正确翻译。第一次检查是将检索到的数据的大小与实际文件大小进行比较。

至少在Firefox上，似乎有一种特殊检索二进制数据的方法，如下所述： 处理二进制数据.

Answer 3

这是一种更容易（性能更大）的方法：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周围进行解决方案。