2012-02-15 24 views
12

Używam technologii HTML5 z FileApi.Dekodowanie obrazu binarnego JPEG2000 za pomocą Javascriptu

Mój problem jest bardzo prosta, ale szukam od 2 dni temu i nie znaleźć nic w internecie

Mam DicomFile. Używam FileApi z HTML5, aby je rozbić i uzyskać wszystkie informacje. Wreszcie dostaję dane obrazu w tablicy bajtów. Problem polega na tym, że nie mogę dekodować obrazu JPEG2000 i wyświetlać go w przeglądarce (Chrome, FireFox, dowolny). Na przykład, jeśli dane obrazu są kodowane w formacie JPEG, nie mam problemu z wyświetleniem obrazu w przeglądarce, ale problem dotyczy JPEG2000 lub JPEG-LS. Wiem, że te formaty obrazu nie są w stanie wyświetlać się w przeglądarkach internetowych, ale musi istnieć biblioteka w JavaScript, aby odkodować dane obrazu zapisane w JPEG2000 lub JPEG-LS. To bardzo ważne i jestem trochę odseparowany.

Jeśli nie znajdę żadnego sposobu, aby to zrobić, będę musiał zmienić całą moją pracę.

Dziękuję bardzo z góry

Odpowiedz

6

wierzę pdf.js projekt może dekodować JPEG2000 obrazy skompresowane w pliku pdf. Zobacz ten comment i ten tweet.

Mam nadzieję, że to pomaga.

14

Ponieważ obrazy JPEG 2000 nie wyświetlają się natywnie w przeglądarkach, prawdopodobnie trzeba będzie je przekonwertować na coś, co przeglądarki mogą wyrenderować przed użyciem ich na stronie internetowej. Najprostszym sposobem na zrobienie tego będzie po prostu konwersja strony serwera zdjęć na format bezpieczny w Internecie, a następnie przesłanie przekonwertowanych obrazów do przeglądarki. Jeśli jednak jesteś zdecydowany zrobić to po stronie klienta, to istnieje przykład użycia JavaScript do dekodowania obrazów JPEG 2000 tutaj: https://github.com/kripken/j2k.js/blob/master/examples/simple.html.

Działa to przy użyciu kompilacji JavaScript z biblioteki OpenJPEG dostępnej pod numerem here. To jest to automatyczna konwersja nie jest najpiękniejszy w użyciu, ale one dostarczyć następujące funkcja sprawia, że ​​używają nieco łatwiejsze:

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

Tu data ma być tablica JavaScript bajtów (no numbers JavaScript o wartości między 0 i 255 włącznie) jak w example file. Można to uzyskać, konwertując obrazy do tej strony serwera, lub Ajaxując je i traktując odpowiedź jako dane binarne (zobacz: MDN's using XHR's, jak to zrobić w przeglądarce Firefox przynajmniej, inne przeglądarki prawdopodobnie potrzebują different methods). Wyjście z tej funkcji jest następnie wprowadzane do elementu Canvas tak:

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

Ponieważ wykorzystuje element Canvas Oznacza to nie będzie działać w IE8, ale za to może być możliwe, aby zrobić coś innego. Na przykład możesz spróbować uzyskać przekonwertowane dane obrazu we właściwym formacie dla mapy bitowej lub innego prostego zgodnego formatu zgodnego z IE, kodując go base64, a następnie wstawiając go jako źródło elementu obrazu, zobacz przykłady użycia danych w postaci http://css-tricks.com/data-uris/ adresy URL takie jak to.

+0

Dziękuję bardzo! Próbowałem tej biblioteki JavaScript (J2K.js) i działałem idealnie! Problem dotyczył tylko obrazu o rozmiarach poniżej 1 MB, jeśli jego rozmiar jest większy, nie zadziała. Ponieważ używamy obrazu DICOM (5 MB w J2K), to nie działa dobrze dla nas. Ale spróbuję użyć AJAX. Dzięki jeszcze raz. – user1211709

+1

Bez problemu. Mam nadzieję, że udało się to naprawić! Nawiasem mówiąc, jeśli uznasz to za przydatne, dobrym zwyczajem będzie oddanie głosu w górę! ;-) –

+0

Należy pamiętać, że adres URL biblioteki j2k.js został zmieniony.Zmieniłem odpowiedź, ale podejrzewam, że nadal jest praca do zrobienia. –