使用Javascript解碼JPEG2000 bitarray圖像

我在FileApi中使用了HTML5技術。使用Javascript解碼JPEG2000 bitarray圖像

我的問題很簡單，但由於3天前我在尋找，我還沒有在網上

我有一個DicomFile上發現任何東西。我使用HTML5中的FileApi將其分解，並獲取所有信息。最後，我得到了一個字節數組中的圖像數據。問題是我無法解碼JPEG2000圖像並在瀏覽器中顯示它（Chrome，FireFox，任何）。例如，如果圖像數據採用JPEG格式編碼，則在瀏覽器中顯示圖像時完全沒有問題，但問題出在JPEG2000或JPEG-LS上。我知道這些圖像格式無法在網頁瀏覽器中顯示，但它必須存在JavaScript中的庫來解碼JPEG2000或JPEG-LS中的圖像數據。這是非常重要的，我有點失望。

如果我找不到任何方法來做到這一點，我將不得不改變我所有的工作。

非常感謝你提前

來源

2012-02-15 user1211709

我相信pdf.js項目可以解碼PDF文件壓縮的JPEG2000圖像。看到這個comment和這個tweet。

希望它有幫助。

來源

2012-03-01 10:13:03 Serge

由於JPEG 2000圖像本身並不在瀏覽器中呈現，因此您可能必須將它們轉換爲瀏覽器在網頁上使用它們之前可以呈現的內容。最簡單的方法是將圖像服務器端轉換爲網頁安全格式，然後將轉換後的圖像提供給瀏覽器。但是，如果您決定在客戶端執行此操作，則可以使用JavaScript來解碼JPEG 2000圖像：https://github.com/kripken/j2k.js/blob/master/examples/simple.html。

這項工作使用JavaScript編譯的OpenJPEG庫，可用here。這本是一個自動轉換它不是最好的使用，但它們提供以下功能使得它的使用更容易一點：

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

這裏data預計字節（以及JavaScript的數字的JavaScript陣列之間的值0和255），如example file。您可以通過將圖像轉換爲此表單服務器端或將它們Ajaxing並將響應視爲二進制數據（請參閱MDN's using XHR's關於如何爲Firefox執行此操作（至少其他瀏覽器可能需要different methods））來獲得此信息。那麼這個函數的輸出被放到一個Canvas元素，像這樣：

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

由於這個使用Canvas元素意味着這不會在IE8的工作，但對於有可能到別的做一些事情。例如，您可以嘗試以適當格式獲取轉換後的圖像數據，以獲得位圖或其他簡單的IE兼容格式，base64編碼，然後將其粘貼爲圖像元素的來源，有關如何使用數據的示例，請參閱http://css-tricks.com/data-uris/網址喜歡這個。

來源

2012-03-14 14:14:06

非常感謝！我試過這個JavaScript庫（J2K.js），並且工作完美！問題只在於尺寸小於1MB的圖像，如果尺寸較大，則不起作用。因爲我們使用的是DICOM圖像（J2K中的5 MB大小），所以對我們來說不能正常工作。但我會嘗試使用AJAX。再次感謝。 – user1211709 2012-03-21 11:23:59

沒問題。希望你能夠解決它！順便說一句，如果你發現這個有用，這是一個很好的做法，以表決它！ ;-) – 2012-03-21 12:18:04

請注意，j2k.js庫的URL已更改。我編輯了答案，但我懷疑還有工作要做。 – 2014-06-19 16:33:40

使用Javascript解碼JPEG2000 bitarray圖像

回答

相關問題