Canvasにて、用意した画像の一部のみ(一定範囲)をグレースケールにしたい
Canvasで用意した画像の、一部のみをグレースケールにするため、
こちらのQiita記事を参照にグレースケールの関数を作ったのですがうまくいきません。
サイトのコードを使うと画像全体は問題なくグレースケールになるのですが、
一部のピクセルのみをグレースケール化することができていません。
画像(canvas)は300 * 300の画像なので、90000ピクセルあると思いますが、
そのうちの、例えば、画像中央に200 * 200のグレースケール部分を作りたいと考えています。
※ソースコードでは2250ピクセル地点から、20250ピクセル地点までになっています。
該当のソースコード
JavaScript
1ソースコード 2```//グレースケール 3 function grayScale() { 4 var src = ctx.getImageData(0, 0, canvas.width, canvas.height); 5 var dst = ctx.createImageData(canvas.width, canvas.height); 6 7 if(src.data[0] <= src.data[9000]) { 8 for (var i = 0; i < 9001; i=i+4) { 9 var pixel = (src.data[i] + src.data[i+1] + src.data[i+2]) / 3; 10 dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel; 11 dst.data[i+3] = src.data[i+3]; 12 } 13 } else if(src.data[81000] <= src.data.length) { 14 for (var i = 81001; i < src.data.length; i=i+4) { 15 var pixel = (src.data[i] + src.data[i+1] + src.data[i+2]) / 3; 16 dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel; 17 dst.data[i+3] = src.data[i+3]; 18 } 19 } else { 20 for (var i = 9001; i < src.data[81000]; i=i+4) { 21 var pixel = src.data[i] + src.data[i+1] + src.data[i+2]; 22 dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel; 23 dst.data[i+3] = src.data[i+3]; 24 } 25 } 26 27 ctx.putImageData(dst, 0, 0); 28 } 29 30### 試したこと 31 32上記の通り実行したのですが、画像の上部の、わずかな部分のみが切り取られてグレースケールとなり、残りはなにもないcanvasになってしまっています。 33 34よろしければ回答よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。