はじめに

Dicomデータをsagittal, coronal表示させる時にタイトルのエラーが出たので記録する。

エラーについて

：の右側を読むと、「long型じゃありません」とのこと。つまり、該当箇所の変数の型が本来ならlong型のところそうなってないみたい。
左側の”TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D'”については初めて見るエラーだったので詳しく調べてみることにする。

CanvasRenderingContext2D.getImageData()

getImageDataというのは、Canvas2D APIのCanvasRenderingContext2Dというメソッドにある関数である。
この関数は、canvasで指定された部分の基礎となるピクセルデータを表すImageDataオブジェクトを返す。
この関数は引数に抽出するImageDataのx座標、y座標、幅、高さを持つことができます。
MDN Web Docs: CanvasRenderingContext2D.getImageData()

この関数に表示させたいImageDataの各座標を渡して、ImageDataを出力するイメージになる。

エラー全体

上記のことを踏まえると今回出ているこのエラーは、getImageData()に渡している引数がlong型になっていないということになるのか...?
実際にこのエラー分をまるまるコピペしてググってみたところ、

ローカル環境で参照する場合はセキュリティ機構の使用によりエラーが発生する
Webサーバーを配置してhttpでアクセスする必要がある。

後者の方は、実際にhttpアクセスで読み込んだデータを表示しているシステムを参考にしているの考えにくいと感じた。

最後に

かなり雑な調べ方になってしまったが、エラーの概要は掴むことができた。
渡ってきたデータをlong型に変換する方法、実際にサーバーを立ててデータを読んでみる方法、両方とも試してみてどうだったのか、後日記載することにする。

追記(2021/10/8)

new Int16Array()

Int16Array()は型付き配列のコンストラクターで16ビット符号付きの配列を作成する。
MDN Web Docs: Int16Array()コンストラクター

var int16 = new Int16Array(2);
int16[0] = 45;

console.log(int16[0]); //45
console.log(int16[0].length); //2

上記のコードより、Int16Arrayは簡単に説明すると配列を生成するものである。

1行目： int16という配列を生成する
配列の中身は[0, 0]
2行目：配列の0番目に45を代入する

今回エラーの発生箇所を調べると、

let plane = new Int16Array(this.xSize * this.ySize)

というようにplaneはInt16Arrayに渡した計算結果によって配列を生成している。
DICOMデータは一枚だけでなく複数のDICOMデータを読み込むのでnewをしてインスタンス化している。
今回のエラーは渡している引数がlong型になっていないというエラーなのでここで変数が配列に定義されているのでここがエラーの原因だと考えている。

typeof

typeofは方を文字列で返す演算子である。
MDN Web Docs: typeof

console.log(typeof 45); //"number"
console.log(typeof 'blue'); //"string"
console.log(typeof true); //"boolean"

追記(2021/11/12)

正常処理(axial画像を選択して表示させるまでの流れ)を追う。