0

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

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

我的代码（绘图代码似乎可以工作，bmp 解码没那么多）

http://gist.github.com/614328

未来对 BMP 之外的其他图像的支持是合理的，并且由于画布的工作方式，最容易在 RGBA 中绘制像素。Texture2D 本质上是 RGBA 字节数组的包装类，以及绘图代码。ByteStream 使处理字节数组的眼睛更容易一些，而 BitmapDecoder 包含将 BGR 格式转换为 RGBA texture2d 以进行绘图的方法。

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

仅供参考，我从维基百科获得了文件规范：

http://en.wikipedia.org/wiki/BMP_file_format#Bitmap_Information_.28DIB_header.29

知道导致我的 BMP 绘制不正确的解码逻辑或绘图逻辑中发生了什么吗？

4

3 回答 3

1

这是一种更简单（并且性能大大提高）的方法：base64 对 BMP 数据进行编码（您可以在服务器或客户端上执行此操作），然后使用数据 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 和更高版本——存在 IE7 变通办法）以及 BMP 格式。

正如 casablanca 指出的那样，通过 Ajax 加载二进制数据可能会出现问题，因此您可能不得不四处搜索解决方法。

于 2010-10-07T00:35:58.947 回答
1

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

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

于 2010-10-07T00:37:19.770 回答
0

修复是两件事的结合

  1. 一些 VBScript 来读取 responseBody 的原始字节
  2. 正确解码字节数据，每个像素都没有像维基百科文章建议的那样被填充，实际上每个扫描线都被填充到 dword 大小。

工作代码：

http://gist.github.com/616240

于 2010-10-08T01:57:19.080 回答