javascript - 如何使用 JavaScript 解码 JPEG2000 位数组图像

Question

我正在使用File API分解 DICOM 文件并获取字节数组中的数据。

问题是我无法解码 JPEG2000 图像并在浏览器(Chrome、Firefox 等)中显示它。例如，如果图像数据以 JPEG 格式编码，那么在浏览器中显示图像完全没有问题，但问题出在 JPEG2000 或 JPEG-LS 上。

我知道这些图像格式默认情况下无法在网络浏览器中显示，但是 JavaScript 中一定存在一种方法来解码 JPEG2000 或 JPEG-LS 中的图像数据，肯定吗？

Answer 1

由于 JPEG 2000 图像无法在浏览器中本地呈现，因此您可能必须先将它们转换为浏览器可以呈现的图像，然后才能在网页上使用它们。最简单的方法是将图像服务器端转换为某种网络安全格式，然后将转换后的图像提供给浏览器。但是，如果您决定在客户端执行此操作，那么这里有一个使用 JavaScript 解码 JPEG 2000 图像的示例:https://github.com/kripken/j2k.js/blob/master/examples/simple.html .

这可以使用 OpenJPEG 的 JavaScript 编译来实现。图书馆，可用 here 。这是一个自动转换，它不是最好用的，但它们提供了以下功能，使其使用起来更容易一些:

// 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 数字)，如 example file 中所示。 。您可以通过将图像转换为此表单服务器端，或者将它们插入并将响应视为二进制数据来获得此信息(至少请参阅 MDN's using XHR's 了解如何在 Firefox 上执行此操作，其他浏览器可能需要 different methods )。然后将该函数的输出放入 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 的示例。