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.
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
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ę! ;-) –
Należy pamiętać, że adres URL biblioteki j2k.js został zmieniony.Zmieniłem odpowiedź, ale podejrzewam, że nadal jest praca do zrobienia. –