JavaScriptでソーベルフィルタを実装したい

質問

ソーベルフィルタをJavaScriptで作成したいと思っています。
まずは縦方にフィルタしたいと思い下記のコードを書きました。
ですが思い通りに処理が行われません。

画像により異なりますがフィルタ処理した画像は
多くの部分が#FF00FFで塗りつぶされてしまいます。

canvasImageData = cxt.getImageData(0, 0, canvas.width, canvas.height);
for (i = 1; i < canvasImageData.width - 1; i++) {
for (j = 1 ; j < canvasImageData.width - 1; j++) {
sumRed = sumGreen = sumBlue = 0;
k = (j * 4) + i * canvasImageData.width * 4;
for (l = -1; l <= 1; l++) {
for (m = -1; m <= 1; m++) {
n = (k + m) + l * canvas.width * 4;
sumRed += canvasImageData.data[n] * filter[l + 1][m + 1];
sumGreen += canvasImageData.data[n + 1] * filter[l + 1][m + 1];
sumBlue += canvasImageData.data[n + 2] * filter[l + 1][m + 1];
}
}
sumRed = Math.floor(Math.sqrt(Math.pow(sumRed, 2)));
sumGreen = Math.floor(Math.sqrt(Math.pow(sumGreen, 2)));
sumBlue = Math.floor(Math.sqrt(Math.pow(sumBlue, 2)));

sumRed = (sumRed > 255) ? 255 : sumRed;
sumGreen = (sumGreen > 255) ? 255 : sumGreen;
sumRed = (sumBlue > 255) ? 255 : sumBlue;

canvasImageData.data[k] = sumRed;
canvasImageData.data[k + 1] = sumGreen;
canvasImageData.data[k + 2] = sumBlue;
}
}
cxt.putImageData(canvasImageData, 0, 0, canvasImageData.width, canvas.height);

色々試したのですが手がかりがありません。
どのようなことでも良いので教えていただきたいと思います。

回答No.2

noname#208507

JavaScriptをよく知らないのでコードからの推測ですが、0から255ではエッジ強度を記録するのに足りないのでは。フィルタの中央だけでも元の輝度が255と0だった場合 sqrt((255 * (-2) - 0 * 2)^2) = 510 になると思います。

お礼

ご解答ありがとうございます。

>sqrt((255 * (-2) - 0 * 2)^2) = 510

ご指摘の部分を調べたら幾つか情報がありました。
まだ解決の方法には至っていませんが手がかりができました。

ありがとうございます。

回答No.1

kmee

・filter[][]の中身は?

補足

コードが足りなくて申し訳ありません。

filterは下記のように定義しました。
var filter = [];
filter[0] = [-1, 0 ,1];
filter[1] = [-2, 0, 2];
filter[2] = [-1, 0, 1];

宜しくお願いいたします。