Ответ 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-адресов данных.