JavascriptでJPEG2000ビットマップ画像をデコードします。

Question

私はFileApiでHTML5テクノロジーを使用しています。

私の問題は非常に簡単ですが、私は2日前から探していると私は私がDicomFileを持っているウェブ

に何かを見つけることがあります。私はHTML5のFileApiを使用してそれを分解し、すべての情報を取得します。最後に、イメージデータをバイト配列で取得します。 問題はJPEG2000画像をデコードしてブラウザ（Chrome、FireFox、any）に表示できないことです。たとえば、画像データがJPEG形式でコード化されている場合、ブラウザに画像を表示するのに全く問題はありませんが、問題はJPEG2000またはJPEG-LSです。 JPEG形式やJPEG-LS形式の画像データをデコードするには、Javascriptでライブラリが存在している必要があります。 それは非常に重要で、私はちょっと甘いです。

これを行う方法が見つからない場合は、すべての作業を変更する必要があります。

は、私はpdf.jsプロジェクトはpdfファイルに圧縮されたJPEG2000画像をデコードすることができると信じて、事前

Answer 1

にありがとうございました。このcommentとこれを参照してくださいtweet。

希望します。

Answer 2

JPEG2000画像はブラウザではネイティブにレンダリングされないため、ブラウザでレンダリングできるものに変換する必要があります。これを行う最も簡単な方法は、イメージサーバー側をWebセーフな形式に変換し、変換されたイメージをブラウザに提供することです。しかし、クライアントサイドでそれを行うことに決めたら、JavaScriptを使用してJPEG 2000画像をデコードする例がここにあります：https://github.com/kripken/j2k.js/blob/master/examples/simple.html。

これは、OpenJPEGライブラリのJavaScriptコンパイルを使用しています（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を含む）を返します。イメージをこのフォームサーバー側に変換するか、Ajaxingしてその応答をバイナリデータとして扱うことで、これを取得できます（少なくともFirefoxの場合はMDN's using XHR'sを参照してください。他のブラウザではおそらく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); 

これはIE8で動作しませんが、そのために何かを行うことは可能であるかもしれないことを意味します。たとえば、変換されたイメージデータを、ビットマップまたはその他の単純なIE互換フォーマットの正しいフォーマットで取得し、base64でエンコードして画像要素のソースとして貼り付けることができます。データの使用方法の例はhttp://css-tricks.com/data-uris/を参照してくださいこのようなURL。