Decodifica immagine bitarray JPEG2000 con Javascript

Question

Uso la tecnologia HTML5 con FileApi.

Il mio problema è molto semplice, ma sto cercando da 2 giorni fa e non ho trovare qualsiasi cosa sul web

Ho un DicomFile. Uso FileApi da HTML5 per scomporlo e ottenere tutte le informazioni. Finalmente ottengo i dati dell'immagine in un array di byte. Il problema è che non posso decodificare un'immagine JPEG2000 e mostrarla nel browser (Chrome, FireFox, qualsiasi). Ad esempio, se i dati dell'immagine sono codificati in formato JPEG, non ho alcun problema a mostrare l'immagine nel browser, ma il problema è con JPEG2000 o JPEG-LS. So che quei formati di immagine non sono in grado di mostrare nei browser web, ma deve esistere una libreria in Javascript per decodificare i dati dell'immagine che si trovano in JPEG2000 o JPEG-LS. È molto importante e sono un po 'disperato.

Se non riesco a trovare un modo per fare questo, dovrò cambiare tutto il mio lavoro.

Grazie mille in anticipo

Answer 1

Credo pdf.js progetto in grado di decodificare le immagini JPEG2000 compressi in un file PDF. Vedi questo comment e questo tweet.

Spero che aiuti.

Answer 2

Poiché le immagini JPEG 2000 non rendano in modo nativo nei browser, probabilmente dovrete convertirli in qualcosa che i browser possono rendere prima di utilizzarli su una pagina web. Il modo più semplice per farlo sarebbe quello di convertire il lato del server delle immagini in un formato sicuro per il Web e di servire le immagini convertite nel browser. Tuttavia, se sei determinato a farlo lato client, allora c'è un esempio di utilizzo di JavaScript per decodificare le immagini JPEG 2000 qui: https://github.com/kripken/j2k.js/blob/master/examples/simple.html.

Questo funziona utilizzando una compilazione JavaScript della libreria OpenJPEG, disponibile here. Questa è la conversione automatica non è il più bello da usare, ma forniscono la seguente funzione permette di utilizzare un po 'più semplice:

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

Qui data dovrebbe essere array JavaScript di byte (anche numeri JavaScript con valori compresi tra 0 e 255 inclusi) come nello example file. È possibile ottenere questo convertendo le immagini in questo lato del modulo server, o aggiungerle e trattando la risposta come dati binari (vedere MDN's using XHR's su come farlo per Firefox almeno, altri browser probabilmente hanno bisogno di different methods). L'uscita di questa funzione viene poi messo in un elemento tela 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); 

Da questa utilizza l'elemento tela significa che questo non funzionerà in IE8, ma che potrebbe essere possibile fare qualcos'altro. Ad esempio, potresti provare a ottenere i dati di immagine convertiti nel formato corretto per un bitmap o un altro semplice formato compatibile IE, codificandoli in base64 e inserendolo come origine di un elemento immagine, vedi http://css-tricks.com/data-uris/ per esempi su come utilizzare i dati url come questo.