getImageDataの代わり

Question

canvasにおいて、getImageDataを使わずにRGB値を読み込むことは可能ですか？
調べたところ、createImageDataでできるとあったのですが、仕組みがよくわからないです。
ぜひ、教えてください。
下記のURLを基に作成しました。
http://mementoo.info/archives/1617

    window.addEventListener("DOMContentLoaded", function(){
    //ファイルオープンの際のイベント
    var ofd = document.getElementById("selectfile");
    ofd.addEventListener("change", function(evt) {
    //ここに画像データを入力
    var img = null;
    var file = evt.target.files;
    var reader = new FileReader();
    //dataURL形式でファイルを読み込む
    reader.readAsDataURL(file[0]);
    //ファイルの読込が終了した時の処理
    reader.onload = function(){
        img = new Image();
        img.onload = function(){
        /*読み込み終了後ここで画像を加工して表示する*/
        }
        //読み込んだ画像ソースを入れる
        img.src = reader.result;
        //キャンバスに画像をセット
    var canvas = document.getElementById('c1');
    var context = canvas.getContext('2d');
    var width = img.width;
    var height = img.height;
    canvas.width = width;
    canvas.height = height;
    context.drawImage(img, 0, 0);
    
    //ここでimagedataを読み込もうと思っています。

    for (var i = 0; i < height; i++) {
        for (var j = 0; j < width; j++) {
            var idx = (j + i * width) * 4;
            var r = img[idx]; //赤
            var g = img[idx+1]; //緑
            var b = img[idx+2]; //青
            
            var gray = (r+g+b)/3;
            img[idx] = gray;
            img[idx+1] = gray;
            img[idx+2] = gray;
        }
    }
  //RGBの確認
    idx = 1;
    console.log(img[idx+2]);
}

}, false);
}, false);

Answer 1

不可能です。
そのページにもある通り、ピクセルデータはgetImageData()で取得されるImageData.dataです。
中段に書かれている、”およびcreateImageDataメソッド”というのは、
createImageData()で作った入れ物に、ImageData.dataの内容をそのまま書き入れたり（複製）、計算結果を書き入れたり（フィルタリング）して、画像の加工ができるという意味。

getImageData()の動作が、createImageData()＋ImageData読込みなので
入れ物の作成は、createImageData()の代わりに、getImageData()でも可能だがcreateImageData()のほうが処理が軽く、ImageData読込みは、getImageData()でしか不可能。

Comments

[th3]

回答ありがとうございます。
getImageDataが使えないということは、ピクセル値を取得できないのですね…