由于 JPEG 2000 图像不会在浏览器中本地呈现，因此您可能必须将它们转换为浏览器可以呈现的东西，然后才能在网页上使用它们。最简单的方法是将图像服务器端转换为某种网络安全格式，然后将转换后的图像提供给浏览器。但是，如果您决定在客户端进行，那么这里有一个使用 JavaScript 解码 JPEG 2000 图像的示例：https ://github.com/kripken/j2k.js/blob/master/examples/simple .html。
这使用OpenJPEG库的 JavaScript 编译，可在此处获得。这是一个自动转换，它不是最好的使用，但它们提供以下功能使其使用更容易：
// 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 字节数组（以及值在 0 到 255 之间的 JavaScript 数字），如示例文件中所示。您可以通过将图像转换到此表单服务器端来获取此信息，或者将它们 Ajaxing 并将响应视为二进制数据（请参阅MDN's using XHR's on how to do this for 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 的示例。