我在 FileApi 中使用 HTML5 技术。
我的问题很简单，但我从 2 天前开始搜索，我在网上没有找到任何东西
我有一个 DicomFile。我使用 HTML5 中的 FileApi 对其进行分解，并获取所有信息。最后我得到一个字节数组中的图像数据。 问题是我无法解码 JPEG2000 图像并将其显示在浏览器（Chrome、FireFox 等）中。例如，如果图像数据以 JPEG 格式编码，我在浏览器中显示图像完全没有问题，但问题在于 JPEG2000 或 JPEG-LS。我知道这些图像格式无法在网络浏览器中显示，但它必须存在一个 Javascript 库来解码 JPEG2000 或 JPEG-LS 中的图像数据。 很重要，我有点绝望。
如果我找不到任何方法来做到这一点，我将不得不改变我所有的工作。
非常感谢您
【问题讨论】：
标签： javascript decode dicom fileapi jpeg2000
由于 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 中所示。您可以通过将图像转换到此表单服务器端来获取此信息，或者将它们 Ajaxing 并将响应视为二进制数据（请参阅 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/ 以了解如何使用这样的数据网址。
【讨论】：