Расшифруйте изображение JPEG2000 с помощью Javascript - PullRequest
Новая
       37

Расшифруйте изображение JPEG2000 с помощью Javascript

13 голосов
/ 15 февраля 2012

Я использую технологию HTML5 с FileApi.

Моя проблема очень проста, но я ищу 2 дня назад и ничего не нашел в сети

У меня есть DicomFile. Я использую FileApi из HTML5, чтобы разбить его и получить всю информацию. Наконец я получаю данные изображения в байтовом массиве. Проблема в том, что я не могу декодировать изображение JPEG2000 и показать его в браузере (Chrome, FireFox, любой). Например, если данные изображения закодированы в формате JPEG, у меня нет проблем с отображением изображения в браузере, но проблема заключается в JPEG2000 или JPEG-LS. Я знаю, что эти форматы изображений не могут отображаться в веб-браузерах, но в Javascript должна существовать библиотека для декодирования данных изображения в формате JPEG2000 или JPEG-LS. Это очень важно, и я немного не в себе.

Если я не могу найти способ сделать это, мне придется изменить всю мою работу.

Большое спасибо заранее

Ответы [ 2 ]

17 голосов
/ 14 марта 2012

Поскольку изображения в формате JPEG 2000 изначально не отображаются в браузерах, вам, вероятно, придется преобразовать их во что-то, что браузеры могут отобразить, прежде чем использовать их на веб-странице. Самый простой способ сделать это - просто преобразовать сторону сервера изображений в какой-нибудь безопасный для сети формат, а затем отправить преобразованные изображения в браузер. Однако, если вы решили сделать это на стороне клиента, то есть пример использования JavaScript для декодирования изображений JPEG 2000 здесь: https://github.com/kripken/j2k.js/blob/master/examples/simple.html.

Это работает с использованием JavaScript-компиляции библиотеки OpenJPEG , доступной здесь . Это автоматическое преобразование, которое не очень удобно использовать, но они предоставляют следующую функцию, что делает его использование немного проще: 

// Wrapper around OpenJPEG..
//Converts the given j2k image array to RGB values that
//can be put into a Canvas..
function j2k_to_image(data) {
    run();
    _STDIO.prepare('image.j2k', data);
    callMain(['-i', 'image.j2k', '-o', 'image.raw']);
    return _STDIO.streams[_STDIO.filenames['image.raw']].data;
}

Здесь data ожидается в виде массива байтов JavaScript (ну, в общем, чисел JavaScript со значениями от 0 до 255 включительно), как в файле примера . Вы можете получить это, конвертировав изображения на эту сторону сервера форм или обработав их Ajaxing и обработав ответ как двоичные данные (см. MDN с использованием XHR о том, как это сделать для Firefox по крайней мере, другим браузерам, вероятно, нужно разные методы ). Выходные данные этой функции затем помещаются в элемент Canvas следующим образом: 

  output = j2k_to_image([255, 0, 123, ...]); //pass in the JPEG 2000 image as an array

  var canvas = document.getElementById('canvas'); //get the canvas element (use whatever you actually need here!)
  canvas.width = imageWidth;
  canvas.height = imageHeight;

  var ctx = canvas.getContext('2d');
  var image = ctx.getImageData(0, 0, canvas.width, canvas.height);

  var componentSize = canvas.width*canvas.height;
  for (var y = 0; y < canvas.height; y++) {
    for (var x = 0; x < canvas.width; x++) {
      var value = output[y*canvas.width + x];
      var base = (y*canvas.width + x)*4;
      image.data[base + 0] = output[0*componentSize + y*canvas.width + x];
      image.data[base + 1] = output[1*componentSize + y*canvas.width + x];
      image.data[base + 2] = output[2*componentSize + y*canvas.width + x];
      image.data[base + 3] = 255; //the alpha part..
    }
  }
  ctx.putImageData(image, 0, 0);

Поскольку здесь используется элемент Canvas, это означает, что в IE8 это не будет работать, но для этого может быть возможно сделать что-то еще. Например, вы можете попробовать получить преобразованные данные изображения в правильном формате для растрового изображения или какого-либо другого простого IE-совместимого формата, закодировать его в base64, а затем вставить в качестве источника элемента изображения, см. http://css -tricks .com / data-uris / с примерами использования URL-адресов данных, подобных этому.

6 голосов
/ 01 марта 2012

Я считаю, что pdf.js проект может декодировать изображения jpeg2000, сжатые в PDF-файл. См. комментарий и твит .

Надеюсь, это поможет.

...