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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

3010閲覧

HTMLのCanvasによって画素値を取得する方法

tarotarosu

総合スコア114

canvas

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/04/10 15:03

編集2016/04/11 04:01

###前提・実現したいこと
HTMLのCanvasを利用して、画像を編集するために、画素値を配列に格納したいと考えています。

###発生している問題・エラーメッセージ

javascript

1$(function(){ 2var r_arr = []; 3for(i=0; i<1620; i++){ 4 r_arr[i] = []; 5 for(j=0; j<580; j++){ 6 r_arr[i][j] = 0; 7 } 8} 9var g_arr = []; 10for(i=0; i<1620; i++){ 11 g_arr[i] = []; 12 for(j=0; j<580; j++){ 13 g_arr[i][j] = 0; 14 } 15} 16var b_arr = []; 17for(i=0; i<1620; i++){ 18 b_arr[i] = []; 19 for(j=0; j<580; j++){ 20 b_arr[i][j] = 0; 21 } 22} 23 24 //画像の準備 25 canvas_img = new Image; 26 canvas_img.src="picture/sample1.png"; 27 canvas_img.onload = function() { 28 var canvas = document.getElementById("texture_view"); 29 if(canvas.getContext) 30 { 31 var context = canvas.getContext("2d"); 32 var width = canvas_img.width; 33 var height = canvas_img.height; 34 var srcData = context.getImageData(0, 0, width, height); 35 var src = srcData.data; 36 //sample1.pngの画素値を編集して配列に格納 37 for (var i = 0; i < height; i++) { 38 for (var j = 0; j < width; j++) { 39 var idx = (j + i * width) * 4; 40 r_arr[i][j] = (src[idx] / 255).toFixed(5); 41 g_arr[i][j] = (src[idx + 1] / 255).toFixed(5); 42 b_arr[i][j] = (src[idx + 2] / 255).toFixed(5); 43 } 44 } 45 alert(r_arr[0][0]); //格納されているか確認 46 context.drawImage(canvas_img, 0, 0, 580, 1620); 47 }; 48 }; 49}); 50

色々なサイト等を参考にし、上のように記述し、試しに、alert(r_arr[0][0]); としてうまく配列内に編集したRGB値が格納されているか確認したのですが、結果は全て0となっていました。
何が配列内に格納されない原因は何なのでしょうか?
ご回答をいただけると助かります。

###追記

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>テスト</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 8 <script type="text/javascript" src="script.js"> 9 10 </script> 11 </head> 12 <body> 13 <h1>テスト</h1> 14 <canvas id="texture_view" width="580" height="1620"></canvas> 15 </body> 16</html> 17 18

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

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

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

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

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

guest

回答2

0

一回目の回答間違えていました、申し訳ございません。

ryls-nmmさんのおっしゃっている通りかと思います。

投稿2016/04/10 15:47

編集2016/04/10 16:12
manabufukai

総合スコア700

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

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

0

ベストアンサー

context.getImageData(0, 0, width, height); でデータを取得しているタイミングでは canvas は真っ白の状態です

context.drawImage(canvas_img, 0, 0)
で画像を canvas に表示してから 取得すれば画像の色情報がとれます

投稿2016/04/10 15:24

ryls-nmm

総合スコア633

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

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

tarotarosu

2016/04/11 02:11

```javascript $(function(){ var r_arr = []; for(i=0; i<1620; i++){ r_arr[i] = []; for(j=0; j<580; j++){ r_arr[i][j] = 0; } } var g_arr = []; for(i=0; i<1620; i++){ g_arr[i] = []; for(j=0; j<580; j++){ g_arr[i][j] = 0; } } var b_arr = []; for(i=0; i<1620; i++){ b_arr[i] = []; for(j=0; j<580; j++){ b_arr[i][j] = 0; } } //ベース画像の準備 canvas_img = new Image; canvas_img.src="picture/sample1.png"; canvas_img.onload = function() { var canvas = document.getElementById("texture_view"); if(canvas.getContext) { var context = canvas.getContext("2d"); var width = canvas_img.width; // var height = canvas_img.height; // context.drawImage(canvas_img, 0, 0); var srcData = context.getImageData(0, 0, width, height); // var src = srcData.data; // //画素値の取得 for (var i = 0; i < height; i++) { for (var j = 0; j < width; j++) { var idx = (j + i * width) * 4; r_arr[i][j] = (src[idx] / 255).toFixed(5); g_arr[i][j] = (src[idx + 1] / 255).toFixed(5); b_arr[i][j] = (src[idx + 2] / 255).toFixed(5); } } alert(r_arr[0][0]);//確認 }; }; }); ``` 上記のように修正し、alert(r_arr[0][0]); で確認したのですが、今回はalert()のウィンドウも表示されませんでした。 何か根本的な誤りがあるのでしょうか…
tarotarosu

2016/04/11 04:02

HTML部分も追記しましたので見ていただけると助かります。
ryls-nmm

2016/04/11 05:15 編集

こちらの環境用に画像のURLとサイズは置き換えましたが、問題なく動きました。 考えられる原因は、使用している画像が `picture/sample1.png` と同じサーバ内にあるように書かれていますが、実際は外部のサイトにある画像を使っていたり、動作確認をローカル環境でやっていたりした場合です その場合はセキュリティ的な理由で、自分のサイト外の画像を貼り付けた canvas のデータを getImageData でエクスポートできなくなります ここでエラーが出るので alert が表示されないのだと思います 同じサーバ上に置いた画像でためしてみてください
tarotarosu

2016/04/12 01:19

ローカルサーバーを起動させて実行することで問題なく動かすことができました。 ありがとうございました!!_(._.)_
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問