3

タイトルはあまり正確ではないと思いますが、これ以上のタイトルは思いつきません。

私は医療画像を扱っています。これらの種類の画像では、決定的なピクセル値はありません。いくつかの情報を抽出し、すべてのピクセル値を自分で計算する必要があります。2 番目の特殊性は、画像の解像度が非常に大きくなる可能性があることです。

したがって、画像をメモリにロードすると、計算に必要な ArrayBuffer とその他の属性がいくつかあります。これらの画像は一般的な形式に基づいていないため、画像 DOMElement を使用してキャンバスに描画することはできません。

ここに私が持っている2つの関連する問題があります:

1) ImageData を使用して画像をキャンバスに描画する必要があります。これは、ArrayBuffer を反復処理して各ピクセル値を計算し、それらを ImageData に格納する必要があることを意味します。再び ImageData と表示ピクセル。画像を表示するために2回繰り返す必要があり、更新するたびに繰り返す必要があるため、これは好きではありません。

2）私が言ったように、画像は非常に巨大になる可能性があるため、スケーリング/スライスを使用する必要がありますが、canvas は putImageData ではなく drawImage に対してのみこれらの機能を提供します。自分で計算したくない場合は、バッファーキャンバスを使用し、その中の画像全体をコピーしてから、このバッファーキャンバスを画像として drawImage を使用する必要があります。これは2つの理由で悪いです:

  • データを複製しています。元の ArrayBuffer とバッファー キャンバスを保持する必要があります。バッファ キャンバスは作成および削除できますが、マウスの動きに応じて画像を更新する必要があるため、そのままにしておく方がよいでしょう。

  • コントラスト/明るさのような画像に変更が加えられた場合、画像のごく一部を表示しているだけでも、画像全体（バッファキャンバスの作成）に対して再計算する必要があります。

ここにいくつかのコードがあります:

//image contains raw data: TypedArrayView and some attributes
// size (2828,2320)
var image;
//displayed canvas
// size (500,500)
var canvas;
//buffer canvas
// size (2828,2320)
var buffCanvas;

function drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight){
   var buffContext = buffCanvas.getContext('2d');
   var imageData = buffContext.getImageData(buffCanvas.width,buffCanvas.height);

   //Iterate over all the image (2828,2320)
   for(var i = 0; i < imageData.data.length; i++ )
     //process pixel calculation
     imageData[i] = image.buffer[i] + SomeCalculation;

   buffContext.putImageData(imageData,0,0);

   canvas.getContext('2d').drawImage(buffCanvas,sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
}

function onmousemove(){
   //change some image properties
   image.contrast = 150;
   ...

   drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
}

私はこれに慣れていないので、これを行う方法は生産的ではないため、何かが欠けているに違いありません。

私の夢は、ArrayBuffer に対して行われたようなビューを作成するか、ブラケット演算子をオーバーライドする (不可能) か、偽の画像要素を作成することです。これは次のように機能します。 

function MedicalImage(data, ...){
  ...
}

MedicalImage.prototype.getPixelValueAt = function(pos){
  return data[pos] + SomeCalculation;
}

var img = new MedicalImage();
context.drawImage(img,sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

また、ブラウザは getPixelValueAt() を呼び出して、必要に応じてピクセル値を取得します。

4

0 に答える 0