canvasにおいて、getImageDataを使わずにRGB値を読み込むことは可能ですか?
調べたところ、createImageDataでできるとあったのですが、仕組みがよくわからないです。
ぜひ、教えてください。
下記のURLを基に作成しました。
http://mementoo.info/archives/1617
JavaScript
1 window.addEventListener("DOMContentLoaded", function(){ 2 //ファイルオープンの際のイベント 3 var ofd = document.getElementById("selectfile"); 4 ofd.addEventListener("change", function(evt) { 5 //ここに画像データを入力 6 var img = null; 7 var file = evt.target.files; 8 var reader = new FileReader(); 9 //dataURL形式でファイルを読み込む 10 reader.readAsDataURL(file[0]); 11 //ファイルの読込が終了した時の処理 12 reader.onload = function(){ 13 img = new Image(); 14 img.onload = function(){ 15 /*読み込み終了後ここで画像を加工して表示する*/ 16 } 17 //読み込んだ画像ソースを入れる 18 img.src = reader.result; 19 //キャンバスに画像をセット 20 var canvas = document.getElementById('c1'); 21 var context = canvas.getContext('2d'); 22 var width = img.width; 23 var height = img.height; 24 canvas.width = width; 25 canvas.height = height; 26 context.drawImage(img, 0, 0); 27 28 //ここでimagedataを読み込もうと思っています。 29 30 for (var i = 0; i < height; i++) { 31 for (var j = 0; j < width; j++) { 32 var idx = (j + i * width) * 4; 33 var r = img[idx]; //赤 34 var g = img[idx+1]; //緑 35 var b = img[idx+2]; //青 36 37 var gray = (r+g+b)/3; 38 img[idx] = gray; 39 img[idx+1] = gray; 40 img[idx+2] = gray; 41 } 42 } 43 //RGBの確認 44 idx = 1; 45 console.log(img[idx+2]); 46} 47 48}, false); 49}, false);
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/28 02:29