使用Javascript解码JPEG2000 bitarray图像

Question

我正在使用带有FileApi的HTML5技术.

我的问题很简单,但我在2天前搜索,我在网上找不到任何东西

我有一个DicomFile.我使用HTML5中的FileApi将其分解,并获取所有信息.最后,我得到一个字节数组中的图像数据.问题是我无法解码JPEG2000图像并在浏览器中显示它(Chrome,FireFox,任何).例如,如果图像数据以JPEG格式编码,我在浏览器中显示图像完全没有问题,但问题在于JPEG2000或JPEG-LS.我知道那些图像格式无法在网页浏览器中显示,但它必须在Javascript中存在一个库来解码JPEG2000或JPEG-LS中的图像数据.这非常重要,我有点贬低.

如果我找不到任何办法,我将不得不改变我的所有工作.

非常感谢你提前

Answer 1

由于JPEG 2000图像不能在浏览器中本地呈现,因此您可能必须将它们转换为浏览器可以在网页上使用之前呈现的内容.最简单的方法是将图像服务器端转换为某种Web安全格式,然后将转换后的图像提供给浏览器.但是,如果您决定在客户端执行此操作,那么有一个使用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数组的字节(好的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 /有关如何使用这样的数据网址的示例.

Answer 2

我相信pdf.js项目可以解码压缩在pdf文件中的jpeg2000图像.看到这条评论和这条推文.

希望能帮助到你.