BMP декодирование в JavaScript и рисунок для проводника холста
-
28-09-2019 - |
Вопрос
Мне нужно скачать BMP с JavaScript и визуализируйте его на экран, в Internet Explorer. Во-первых, да, я знаю, что это безумно, я не собираюсь попасть в почему, давайте просто будем принять на мгновение, что IMG SRC не работает из-за ограничений безопасности, но запрос AJAX с правильной аутентификацией в сообщении будет Верните изображение. Этот пример обходит всю безопасность ради простоты и просто доказывает, что мы можем что-то сделать.
Лучшая идея, с которой я мог придумать, должен был получить поток через Ajax, декодировать растровое изображение, а затем сделать его с холстом. Internet Explorer Очевидно, не поддерживает холст, но, к счастью, Google предоставил обертку SVG под названием Eccanvas, которые я могу использовать для этого.
Мой код (код рисования кажется, работает, BMP декодирует не столько)
http://gist.github.com/614328.
Будущая поддержка для других изображений, помимо BMP, является обязательным, и из-за того, как холст работает, проще всего рисовать пиксели в RGBA. Texture2D по существу является классом обертки для массива байтов RGBA, а также код чертежа. Bytestream делает его немного легче на глазах, имеющих дело с массивом байтов, и BitmapDecoder содержит метод для перевода формата BGR в текстуру RGBA для рисования.
Возможен ли байты неправильно переведены по пути или есть что-то дело с моей логикой декодирования?
FYI, я получил файл спецификации из Википедии:
http://en.wikipedia.org/wiki/bmp_file_format#bitmap_information_.28dib_header.29.
Любая идея, что происходит в логике декодирования или логики рисования, которые вызывают мой BMP неправильно?
Решение 3
Исправление было сочетанием двух вещей
- Немного VBScript для чтения сырого байта ответственного
- Правильно декодирование байтовых данных правильно, каждый пиксель не поддается, поскольку статью Wikipedia предлагает, это фактически каждая сканировка, которая дополняется до размера DWord.
Рабочий код:
Другие советы
XMLHttpRequest
(aka ajax) был в первую очередь предназначен для текстового контента, поэтому возможно, что двоичные данные (особенно нулевые символы) не переводится правильно. Первая проверка будет сравнивать размер извлеченных данных с фактическим размером файла.
По крайней мере, на Firefox, кажется, есть способ специально получить двоичные данные, как описано здесь: Обработка двоичных данных.
Вот гораздо более простые (и значительный исполнительный) подход: Base64 кодирует данные BMP (вы можете сделать это либо на сервере, либо на клиенте), а затем встроить его на страницу с помощью УРИ:
<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 - для Wearbounds IE7), а также формат BMP.
Как отмечает Casablanca, могут возникнуть проблемы с загрузочными двоичными данными через AJAX, поэтому вам, возможно, придется Google для обходных путей.