BMP декодирование в JavaScript и рисование в Explorer Canvas - PullRequest
Новая
       43

BMP декодирование в JavaScript и рисование в Explorer Canvas

0 голосов
/ 07 октября 2010

Мне нужно скачать BMP с JavaScript и отобразить его на экране в Internet Explorer. Во-первых, да, я знаю, что это безумие, я не собираюсь вдаваться в причину, давайте на минутку примем, что img src не работает из-за ограничений безопасности, но запрос ajax с соответствующей аутентификацией в посте будет отодвинуть изображение. Этот пример обходит всю безопасность ради простоты и просто доказывает, что мы можем что-то визуализировать.

Лучшей идеей, которую я мог придумать, было получение потока через ajax, декодирование растрового изображения и затем рендеринг его с помощью canvas. Internet Explorer, очевидно, не поддерживает 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 ]

1 голос
/ 07 октября 2010

XMLHttpRequest (он же AJAX) был в первую очередь предназначен для текстового содержимого, поэтому возможно, что двоичные данные (особенно нулевые символы) не транслируются правильно. Первой проверкой будет сравнение размера извлеченных данных с фактическим размером файла.

По крайней мере в Firefox, кажется, есть способ специально извлекать двоичные данные, как описано здесь: Обработка двоичных данных .

1 голос
/ 07 октября 2010

Вот гораздо более простой (и значительно более производительный) подход: 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.

Как указывает Касабланка, могут быть проблемы с загрузкой двоичных данных через Ajax, поэтому вам, возможно, придется поискать обходные пути в Google.

0 голосов
/ 08 октября 2010

Исправление было комбинацией двух вещей

  1. немного VBScript для чтения необработанных байтов ответа.
  2. правильно декодирует байтовые данные, каждый пиксель не дополняется, как предполагает статья в Википедии, фактически каждая строка развертки дополняется до размера двойного слова.

Рабочий код:

http://gist.github.com/616240

...