質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

3477閲覧

canvasからのピクセル値を取得

th3

総合スコア38

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/02/19 06:54

編集2022/01/12 10:55

画像からトリミングした範囲をcanvasに描いて、それをグレイスケール化したときの値が知りたいです。そこで、下記のようなプログラムを作成したのですが、値を取得することができません。
理由を教えてください。エラーが出てないので原因がわからないです。
*追記
値を取得することですが、トリミングされたcanvasの(x,y)どこでも良いのでグレイスケール化した値が求めれているかを確かめたいです。

<head> <title>sub</title> <img id="aaa" src="/sub/first.jpg" height="500"> <script> //厳格モード "use strict";
var x=0; var y=0; (function (){ //elementをid="aaa"に設定 var element = document.getElementById("aaa"); //マウスを押すたびに実行される関数 function MouseDownFunc(event){ //右ボタンのみ反応 if(event.button == 0){ console.log(event.x,event.y); x=event.x; y=event.y; }} // イベントリスナーに対応している if(element.addEventListener){ // マウスのボタンを押すと実行されるイベント element.addEventListener("mousedown" , MouseDownFunc); // アタッチイベントに対応している }else if(element.attachEvent){ // マウスのボタンを押すと実行されるイベント element.attachEvent("onmousedown" , MouseDownFunc); }})(); onclick = function() { draw();}; function draw() { //"c1"から要素を取得する var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); //Imageオブジェクトを生成 var img = new Image(); //元になる画像 img.src = "/sub/first.jpg?"; //画像が読み込まれるのを待ってから処理を続行 img.onload = function() { //img.srcの指定座標を表示 ctx.drawImage(img, x, y, 500, 300, 80, 60, 300, 200); function get() { //"c1"から要素を取得する var imagedata = ctx.getImageData(img,x,y,500,300); var idata = imagedata.data; //ピクセルデータをidataにセット var num = idata.length; //ピクセルデータ総数を取得 var pix = num / 4; //ピクセル数を取得 for ( var i = 0 ; i < pix ; i++ ) { //赤・緑・青のデータを取得 var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; //グレースケール化する処理 var g = parseInt(( r*30 + g*59 + b*11 ) / 100); //グレースケール化したデータを再セット idata[ i*4 ] = g; idata[ i*4 + 1 ] = g; idata[ i*4 + 2 ] = g; } console.log(idata[50]); }}}
</script> </head> <canvas id="c1" width="1176" height="700"></canvas> </body>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rihito

2016/02/19 07:17

どの部分が取得できてないのですか?
th3

2016/02/19 07:24

質問の仕方が悪かったです。 値を取得することですが、トリミングされたcanvasの(x,y)どこでも良いのでグレイスケール化した値が求めれているかを確かめたいです。
rihito

2016/02/19 07:28

こちらももう少し詳しく質問をすればよかったです。 試しに動作させたのですが、console.logが表示されないということでしょうか? ※2箇所ありますが
th3

2016/02/19 07:47

そうなんです。前半のconsole.logで表示されるのですが、後半のconsole.logが表示されないです。
guest

回答2

0

試してみたら、それらしい数字がconsole.logに出たので修正案です。
drow()の中でget()を定義していますが、get()が呼び出されていないので、drow()の最後あたりにget()を追記しました。
あと、getImageDataの第一引数にimgが入ってましたが、これは誤りのようです。

createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP

javascript

1//onclick以降 2 onclick = function() { 3 draw();}; 4 function draw() { 5 //"c1"から要素を取得する 6 var canvas = document.getElementById('c1'); 7 if ( ! canvas || ! canvas.getContext ) { return false; } 8 var ctx = canvas.getContext('2d'); 9 //Imageオブジェクトを生成 10 var img = new Image(); 11 //元になる画像 12 img.src = "Hydrangeas.jpg"; 13 //画像が読み込まれるのを待ってから処理を続行 14 img.onload = function() { 15 //img.srcの指定座標を表示 16 ctx.drawImage(img, x, y, 500, 300, 80, 60, 300, 200); 17 function get() { 18 //"c1"から要素を取得する 19 var imagedata = ctx.getImageData(x,y,500,300); 20 var idata = imagedata.data; //ピクセルデータをidataにセット 21 var num = idata.length; //ピクセルデータ総数を取得 22 var pix = num / 4; //ピクセル数を取得 23 24 for ( var i = 0 ; i < pix ; i++ ) 25 { 26 //赤・緑・青のデータを取得 27 var r = idata[ i*4 ]; 28 var g = idata[ i*4 + 1 ]; 29 var b = idata[ i*4 + 2 ]; 30 //グレースケール化する処理 31 var g = parseInt(( r*30 + g*59 + b*11 ) / 100); 32 //グレースケール化したデータを再セット 33 idata[ i*4 ] = g; 34 idata[ i*4 + 1 ] = g; 35 idata[ i*4 + 2 ] = g; 36 } 37 console.log(idata[50]); 38 } 39 get(); 40 } 41 } 42

これでいかがでしょうか。

投稿2016/02/19 09:11

編集2016/02/19 09:12
snic518

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

th3

2016/02/19 09:51

回答ありがとうございます。 後半のconsole.logに何か数字が出るようになりました。 しかし、これがグレースケール化した画像の階調値とはとても思えない数値でした。 自分で組んだプログラムでとても恐縮ですが、何の数字なのか教えていただけないでしょうか?
guest

0

get()内のログが表示されないとのことですが、呼び出されるような処理になっていないように見えます。
マウス押すたびに処理させるなら、MouseDownFunc内にdraw()を呼び出すといいんじゃないでしょうか。

正常に動作するかまでは確認していませんが。

投稿2016/02/19 07:53

rihito

総合スコア34

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

th3

2016/02/19 08:05

呼び出してみましたが、やはり表示されませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問