代码之家 › 专栏 › 技术社区 › slf

在javascript中进行BMP解码并绘制到浏览器画布

bmp canvas internet-explorer javascript

0

slf · 技术社区 · 14 年前

我需要下载一个带javascript的BMP并将其呈现到Internet Explorer的屏幕上。首先,是的,我知道这很疯狂,我不想解释为什么,让我们暂时接受一下,img-src由于安全限制而不工作,但是在post中具有适当身份验证的Ajax请求将收回图像。这个例子为了简单起见绕过了所有的安全性,并证明了我们可以提供一些东西。

我能想到的最好的主意是通过Ajax获取流,解码位图,然后用画布呈现。显然,InternetExplorer不支持Canvas,但幸运的是,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绘制错误吗?

3 回复 | 直到 14 年前

1

casablanca 14 年前

XMLHttpRequest

Handling binary data

2

1

Jordan Running 14 年前

data 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" />

3

0

slf 14 年前

http://gist.github.com/616240