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 回答