Decode imagen de bitarray JPEG2000 con Javascript

Question

Estoy usando tecnología HTML5 con FileApi.

Mi problema es muy simple, pero estoy buscando desde hace 2 días y no he encontrar nada en la web

Tengo un DicomFile. Utilizo FileApi de HTML5 para descomponerlo y obtener toda la información. Finalmente obtengo los datos de la imagen en una matriz de bytes. El problema es que no puedo decodificar una imagen JPEG2000 y mostrarla en el navegador (Chrome, Firefox, cualquiera). Por ejemplo, si los datos de la imagen están codificados en formato JPEG, no tengo ningún problema para mostrar la imagen en el navegador, pero el problema es con JPEG2000 o JPEG-LS. Sé que esos formatos de imagen no se pueden mostrar en los navegadores web, pero debe existir una biblioteca en Javascript para decodificar los datos de imagen que están en JPEG2000 o JPEG-LS. Es muy importante y estoy un poco desesperado.

Si no puedo encontrar ninguna forma de hacerlo, tendré que cambiar todo mi trabajo.

Muchas gracias de antemano

Answer 1

Creo pdf.js proyecto puede decodificar imágenes JPEG2000 comprimido en un archivo PDF. Consulte esto comment y este tweet.

Espero que ayude.

Answer 2

Como las imágenes JPEG 2000 no se representan de forma nativa en los navegadores, es probable que deba convertirlas en algo que los navegadores puedan reproducir antes de usarlas en una página web. La forma más fácil de hacer esto sería simplemente convertir el lado del servidor de imágenes a algún formato seguro para la web y luego servir las imágenes convertidas al navegador. Sin embargo, si está decidido a hacerlo desde el lado del cliente, entonces hay un ejemplo de uso de JavaScript para decodificar imágenes JPEG 2000 aquí: https://github.com/kripken/j2k.js/blob/master/examples/simple.html.

Esto funciona usando una compilación de JavaScript de la biblioteca OpenJPEG, disponible here. Esto se trata de una conversión automática no es la más agradable de usar, pero que suministran la siguiente función hace es utilizar un poco más fácil:

// 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; 
} 

Aquí data se espera que sea matriz de JavaScript de bytes (así los números de JavaScript con valores entre 0 y 255 inclusive) como en el example file. Puedes obtener esto convirtiendo las imágenes a este lado del servidor de formularios, o Ajaxing y tratando la respuesta como datos binarios (ver MDN's using XHR's sobre cómo hacer esto para Firefox al menos, otros navegadores probablemente necesiten different methods). El resultado de esta función se pone entonces en un elemento Canvas de este modo:

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

Dado que este utiliza el elemento Canvas significa que esto no funcionará en IE8, pero para que tal vez sería posible hacer algo más. Por ejemplo, podría intentar obtener los datos de imagen convertidos en el formato correcto para un mapa de bits u otro formato simple compatible con IE, base64 codificándolo y luego insertándolo como fuente de un elemento de imagen; consulte http://css-tricks.com/data-uris/ para ver ejemplos de cómo usar datos URLs como esta.