JavaScriptでCanvasの画像データにアクセスできることを知ったので、試しにモノクロ画像を表示してみた。contextのgetImageDataを使っているのだが最初は配列の各要素にARGBが入ってるものだと思ってやって失敗。配列の各要素にR、G、B、Aが1つずつ入ってたのでビット演算を使うこともなく楽々取得。でも遅そうな気が...まぁ、とりあえず結果とソースコード
<!DOCTYPE html> <html> <head> <title>楽しい画像処理</title> <meta charset="UTF-8"> <script> window.onload = function(){ var image = new Image(); image.src = "kamo.png"; image.onload = function(){ drawImage(image); } } function drawImage(image){ var srcCanvas = document.getElementById("src"); var srcContext = srcCanvas.getContext("2d"); var dstCanvas = document.getElementById("dst"); var dstContext = dstCanvas.getContext("2d"); srcContext.drawImage(image, 0, 0, 320, 240); drawMonoImage(srcContext, dstContext); } function drawMonoImage(src, dst){ var sImageData = src.getImageData(0, 0, 320, 240); var dImageData = dst.createImageData(320, 240); for(var i = 0; i < sImageData.data.length; i++){ var r = sImageData.data[i * 4]; var g = sImageData.data[i * 4 + 1]; var b = sImageData.data[i * 4 + 2]; var mono = Math.floor(0.299 * r + 0.587 * g + 0.114 * b); dImageData.data[i * 4] = mono; dImageData.data[i * 4 + 1] = mono; dImageData.data[i * 4 + 2] = mono; dImageData.data[i * 4 + 3] = 0xFF; } dst.putImageData(dImageData, 0 , 0); } </script> </head> <body> <canvas id="src" width="320" height="240"></canvas> <canvas id="dst" width="320" height="240"></canvas> </body> </html>