用Javascript解码JPEG2000位阵列图像 [英] Decode JPEG2000 bitarray image with Javascript

问题描述

我正在将HTML5技术与FileApi结合使用.

I'm using HTML5 technology with the FileApi.

我的问题很简单，但是自2天前开始搜索，但是我在网上找不到任何内容

My problem is very simple, but i'm searching since 2 days ago and I have not find anything on the web

我有一个DicomFile.我使用HTML5中的FileApi对其进行分解，并获取所有信息.最后，我将图像数据存储在字节数组中. 问题是我无法解码JPEG2000图像并在浏览器(Chrome，FireFox等)中显示它.例如，如果图像数据以JPEG格式编码，则在浏览器中显示图像完全没有问题，但问题出在JPEG2000或JPEG-LS上.我知道这些图像格式无法在网络浏览器中显示，但是它必须在Javascript中存在一个库才能解码JPEG2000或JPEG-LS中的图像数据. 这非常重要，我有点绝望.

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.

如果找不到任何方法，则必须更改所有工作.

If I can not find any way to do this, I'll have to change all my work.

非常感谢您

推荐答案

由于JPEG 2000图像不能在浏览器中本地呈现，因此您可能必须先将其转换为浏览器可以呈现的内容，然后才能在网络上使用它们，页.最简单的方法是将图像服务器端转换为某种Web安全格式，然后将转换后的图像提供给浏览器.但是，如果您确定要在客户端这样做，那么这里有一个使用JavaScript解码JPEG 2000图像的示例:

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.

这可以使用 OpenJPEG 库的JavaScript编译进行工作，该库可在

This works using a JavaScript compilation of the OpenJPEG library, 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:

// 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应为

Here data is 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's on 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:

  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编码，然后将其作为图像元素的来源，请参见

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.

这篇关于用Javascript解码JPEG2000位阵列图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！