Javascript ile JPEG2000 bitarray görüntüsünü Decode

Question

FileApi ile HTML5 teknolojisini kullanıyorum.

Sorunum çok basittir, ama 2 gün önce beri arıyorum ve ben web

Bir DicomFile var üzerinde bir şey bulmak değil. Bunu çözmek için FileApi'yi HTML5'ten kullanıyorum ve tüm bilgileri aldım. Son olarak, görüntü verisini bir bayt dizisinde alıyorum. Sorun şu ki, bir JPEG2000 Görüntü kodunu çözemediğim ve tarayıcıda gösteremediğim (Chrome, FireFox, herhangi biri). Örneğin, görüntü verileri JPEG biçiminde kodlanmışsa, görüntüyü tarayıcıda göstermek hiç sorunum yok, ancak sorun JPEG2000 veya JPEG-LS'dir. Bu görüntü formatlarının web tarayıcılarında gösterilemediğini biliyorum, ancak JPEG2000 veya JPEG-LS'deki görüntü verilerinin kodunu çözmek için Javascript'te bir kütüphane olmalı. Bu çok önemli ve biraz desesperate.

Bunu yapmanın herhangi bir yolunu bulamazsam, tüm çalışmalarımı değiştirmem gerekecek.

Ben pdf.js proje pdf dosyası sıkıştırılmış jpeg2000 görüntüleri deşifre inanıyoruz peşin

Answer 1

size çok teşekkür ederim. Bkz. comment ve bu tweet.

Yardım edin.

Answer 2

JPEG 2000 görüntüleri tarayıcılarda doğal olarak oluşturulmadığından, bunları tarayıcılarda bir web sayfasında kullanmadan önce oluşturabilecekleri bir şeye dönüştürmeniz gerekecektir. Bunu yapmanın en kolay yolu, görüntüleri sunucu tarafını web uyumlu bir biçime dönüştürmek ve dönüştürülmüş görüntüleri tarayıcıya sunmaktır. Ancak, istemci tarafı yapmaya karar verdiyseniz, JPEG 2000 resimlerinin kodunu çözmek için JavaScript kullanmanın bir örneği vardır: https://github.com/kripken/j2k.js/blob/master/examples/simple.html.

Bu, here adresindeki OpenJPEG kitaplığının JavaScript derlemesini kullanarak çalışır. Bu, bu kullanımı güzel değil otomatik bir dönüşüm olduğunu, ancak şu işlevi biraz daha kolay kullanmak var kılan tedarik: arasındaki değerlerle bayt (kuyu JavaScript sayılar JavaScript dizisi olması bekleniyor İşte data

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

0 ve 255 dahil) example file'da olduğu gibi. Bunu, bu form sunucu tarafına dönüştürerek veya Ajax'ı kullanarak ve ikili veri olarak yanıtı işleyerek bunu elde edebilirsiniz (bkz. Firefox için bunu en az MDN's using XHR's, diğer tarayıcılarda muhtemelen different methods). Bu fonksiyonun çıktısı ise aşağıdaki gibi bir Tuval elemanı konur: bu yana

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

Tuval öğesi, bu IE8 çalışmaz anlamına gelir, ancak bunun için başka bir şey yapmak mümkün olabilir kullanır. Örneğin, dönüştürülmüş görüntü verisini bir bitmap veya başka bir basit IE uyumlu format için doğru biçimde almayı deneyebilir, base64 kodlayarak bunu bir görüntü öğesinin kaynağı olarak yapıştırabilir, veri kullanımına ilişkin örnekler için bkz. http://css-tricks.com/data-uris/ bunun gibi urls.