使用 Javascript 解码 JPEG2000 位阵列图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9296577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Decode JPEG2000 bitarray image with Javascript
提问by user1211709
I'm using HTML5 technology with the FileApi.
我在 FileApi 中使用 HTML5 技术。
My problem is very simple, but i'm searching since 2 days ago and I have not find anything on the web
我的问题很简单，但我从 2 天前开始搜索，但在网上找不到任何东西
I have a DicomFile. I use the FileApi from HTML5 to break it down, and get all the information. Finally I get the image data in a byte array. The problem is that I can not decode a JPEG2000 Image and show it in the browser (Chrome, FireFox, any). For example, if the image data is coded in JPEG format, I have no problem at all to show the image in the browser, but the problem is with JPEG2000 or JPEG-LS. I know that those Image formats aren't able to show in the web browers, but It must exist a library in Javascript to decode the image data that is in JPEG2000 or JPEG-LS. It's very important and I am a bit desesperate.
我有一个 DicomFile。我使用 HTML5 中的 FileApi 对其进行分解，并获取所有信息。最后我得到一个字节数组中的图像数据。问题是我无法解码 JPEG2000 图像并将其显示在浏览器（Chrome、FireFox 等）中。例如，如果图像数据以JPEG格式编码，我在浏览器中显示图像完全没有问题，但问题在于JPEG2000或JPEG-LS。我知道这些图像格式无法在网络浏览器中显示，但它必须存在一个 Javascript 库来解码 JPEG2000 或 JPEG-LS 中的图像数据。这很重要，我有点绝望。
If I can not find any way to do this, I'll have to change all my work.
如果我找不到任何方法来做到这一点，我将不得不改变我所有的工作。
Thank you very much in advance
非常感谢您提前
回答by Mark Rhodes
Since JPEG 2000 images don't render natively in browsers, you'll probably have to convert them to something that browsers can render before using them on a web-page. The easiest way to do this would be to just convert the images server side to some web-safe format then serve the converted images to the browser. However, if you're determined to do it client side then, then there is an example of using JavaScript to decode JPEG 2000 images here: https://github.com/kripken/j2k.js/blob/master/examples/simple.html.
由于 JPEG 2000 图像不会在浏览器中本地呈现，因此在网页上使用它们之前，您可能必须将它们转换为浏览器可以呈现的内容。最简单的方法是将图像服务器端转换为某种网络安全格式，然后将转换后的图像提供给浏览器。但是，如果您决定在客户端进行，那么这里有一个使用 JavaScript 解码 JPEG 2000 图像的示例：https: //github.com/kripken/j2k.js/blob/master/examples/simple html的。
This works using a JavaScript compilation of the OpenJPEGlibrary, available here. This this is an automatic conversion it's not the nicest to use, but they supply the following function makes it's use a bit easier:
这使用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;
}
Here datais expected to be JavaScript array of bytes (well JavaScript numbers with values between 0 and 255 inclusive) as in the example file. You could get this by converting the images to this form server side, or Ajaxing them in and treating the response as binary data (see MDN's using XHR'son how to do this for Firefox at least, other browsers probably need different methods). The output of this function is then put into a Canvas element like so:
这里data预计是 JavaScript 字节数组（以及值介于 0 和 255 之间的 JavaScript 数字），如示例文件. 您可以通过将图像转换到此表单服务器端来获得此功能，或将它们 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);
Since this uses the Canvas element means this won't work in IE8, but for that it might be possible to do something else. For example, you could try getting the converted image data in the right format for a bitmap or some other simple IE compatible format, base64 encoding it then sticking it in as the source of an image element, see http://css-tricks.com/data-uris/for examples of how to use data urls like this.
由于这使用了 Canvas 元素，这意味着这在 IE8 中不起作用，但为此可能可以做其他事情。例如，您可以尝试以正确的位图格式或其他一些简单的 IE 兼容格式获取转换后的图像数据，将其进行 base64 编码，然后将其作为图像元素的源粘贴，请参阅http://css-tricks。 com/data-uris/有关如何使用这样的数据 url 的示例。
