13

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

私の問題は非常に単純ですが、2日前から検索していますが、ウェブ上で何も見つかりませんでした

私は DicomFile を持っています。HTML5 の FileApi を使用してそれを分解し、すべての情報を取得します。最後に、画像データをバイト配列で取得します。問題は、JPEG2000 画像をデコードしてブラウザ (Chrome、FireFox など) に表示できないことです。たとえば、画像データが JPEG 形式でコーディングされている場合、ブラウザーで画像を表示するのにまったく問題はありませんが、JPEG2000 や JPEG-LS では問題があります。これらの画像形式は Web ブラウザーで表示できないことはわかっていますが、JPEG2000 または JPEG-LS の画像データをデコードするには、Javascript のライブラリが存在する必要があります。それは非常に重要であり、私は少し絶望的です.

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

事前にどうもありがとうございました

4

2 に答える 2

18

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

これは、ここから入手できるOpenJPEGライブラリの JavaScript コンパイルを使用して機能します。これは自動変換であり、使用するのに最適ではありませんが、次の関数が提供されているため、使用が少し簡単になります。

// 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 配列 (値が 0 から 255 までの JavaScript の数値) であることが期待されます。画像をこのフォームサーバー側に変換するか、それらを Ajax して応答をバイナリデータとして扱うことでこれを取得できます (少なくとも Firefox でこれを行う方法については、 MDN の XHR の使用を参照してください。他のブラウザーではおそらく別の方法が必要です)。この関数の出力は、次のように 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 を参照してください。このようなデータ URL の使用方法の例については、com/data-uris/を参照してください。

于 2012-03-14T14:14:06.607 に答える
6

pdf.jsプロジェクトは、pdf ファイルに圧縮された jpeg2000 画像をデコードできると思います。このコメントとこのツイートを参照してください。

それが役に立てば幸い。

于 2012-03-01T10:13:03.610 に答える