Декодирование изображения JPEG2000 bitarray с помощью Javascript

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

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

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

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

Спасибо вам заблаговременно

Ответ 1

Поскольку изображения 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-адресов данных.

Ответ 2

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

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