###前提・実現したいこと
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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。