画像上でクリックした座標からのピクセル値を求めるプログラムなのですが、値を出すことができません。
原因がわからないです。
javascript
1var mx,my; 2var x,y; 3var col = new Array(); 4 5window.onload = function () { 6 var canvas = document.getElementById("c1"); 7 var ctx = canvas.getContext("2d"); 8 var img = new Image(); 9 var i ; 10 img.src = "/test/map.jpg"; 11 img.onload = function() { 12 ctx.drawImage(img, 0, 0); 13 var src = ctx.getImageData(0, 0, canvas.width, canvas.height); 14 var dst = ctx.createImageData(canvas.width, canvas.height); 15 for (var y = 0; y < canvas.height; y += 1) { 16 for (var x = 0; x < canvas.width; x += 1) { 17 var i = (y* canvas.width + x)*4; 18 var pixel = (src.data[i] + src.data[i+1] + src.data[i+2]) / 4; 19 dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel; 20 dst.data[i+3] = src.data[i+3]; 21 col[i] = dst.data[i]; 22 col[i+1] = dst.data[i+1]; 23 col[i+2] = dst.data[i+2]; 24 col[i+3] = dst.data[i+3]; 25 }} 26 ctx.putImageData(dst, 0, 0); 27 }; 28 canvas.onmousedown = (function(e) { 29 var rect = e.target.getBoundingClientRect(); 30 mx = e.clientX - rect.left; 31 my = e.clientY - rect.top; 32 for (var my = 0; my < my+20; my += 1) { 33 for (var mx = 0; mx < mx+20; mx += 1) { 34 var i = (my* (mx+20) + mx)*4; 35 console.log(col[i],col[i+1],col[i+2]); 36 37 } 38 } 39}); 40};
回答1件
あなたの回答
tips
プレビュー