用Javascript解码JPEG2000位数组图像

我在FileApi中使用HTML5技术

我的问题很简单，但我从两天前开始搜索，在网上没有找到任何东西

我有一个DicomFile。我使用HTML5中的FileApi对其进行分解，并获取所有信息。最后，我得到一个字节数组中的图像数据。 问题是我无法解码JPEG2000图像并在浏览器（Chrome、FireFox、any）中显示它。例如，如果图像数据以JPEG格式编码，则在浏览器中显示图像完全没有问题，但问题在于JPEG2000或JPEG-LS。我知道这些图像格式无法在web浏览器中显示，但必须存在Javascript库才能解码JPEG2000或JPEG-LS中的图像数据。 这很重要，我有点不赞成

如果我找不到任何方法来做这件事，我将不得不改变我所有的工作

提前非常感谢

我相信project可以解码压缩在pdf文件中的jpeg2000图像。看看这个和这个

---

希望有帮助。

由于JPEG 2000图像不会在浏览器中以本机方式呈现，因此在网页上使用之前，您可能需要将其转换为浏览器可以呈现的内容。最简单的方法是将图像服务器端转换为某种web安全格式，然后将转换后的图像提供给浏览器。但是，如果您决定在客户端执行此操作，那么这里有一个使用JavaScript对JPEG 2000图像进行解码的示例：

这项工作使用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;
}

这里的

数据

应该是字节的JavaScript数组（以及值介于0和255之间的JavaScript数字），如中所示。您可以通过将图像转换到这个表单服务器端，或者将它们转换为一个轴，并将响应视为二进制数据来实现这一点（请参阅Firefox如何实现这一点，其他浏览器可能需要）。然后将此函数的输出放入画布元素，如下所示：

  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);

output=j2k_到_图像（[255,0123，…]）//以数组形式传入JPEG 2000图像
var canvas=document.getElementById（'canvas'）//获取canvas元素（在这里使用您实际需要的任何东西！）
canvas.width=图像宽度；
canvas.height=图像高度；
var ctx=canvas.getContext（'2d'）；
var image=ctx.getImageData（0，0，canvas.width，canvas.height）；
var componentSize=canvas.width*canvas.height；
对于（变量y=0；y

---

由于它使用Canvas元素，这意味着它在IE8中不起作用，但为此，可能需要做其他事情。例如，您可以尝试以位图的正确格式或其他简单的IE兼容格式获取转换后的图像数据，对其进行base64编码，然后将其作为图像元素的源，有关如何使用此类数据URL的示例，请参阅

多谢各位！我已经尝试过JavaScript库（J2K.js）并且工作得非常好！问题只出现在大小小于1MB的图像上，如果大小更大，则无法正常工作。因为我们使用的是DICOM映像（J2K中的大小为5MB），所以它对我们来说并不适用。但我会尝试使用AJAX。再次感谢，没问题。希望你能修好它！顺便说一句，如果你觉得这很有用，那就投票吧！；-）请注意，j2k.js库的URL已更改。我编辑了答案，但我怀疑还有工作要做。