Поскольку изображения 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 включительно), как в пример файла. Вы можете получить это, преобразовав изображения в эту форму на стороне сервера или используя Ajax и обработав ответ как двоичные данные (см. 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-адреса данных.
person
Mark Rhodes
schedule
14.03.2012
