グレースケール表示での階調の変換

画像をグレースケールで表して、一定の階調値を超えなければそこのピクセル部分を任意の文字に変換されるようにしたいのですが、どこが原因かわからないです。
どうか手解きをお願いいたします。

以下がそのソースです。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>chenge</title> <script type="text/javascript"></script> <script type="text/javascript" src="canvas.js"></script> </head> <body> <img src=/game3/map.jpg id=aaa> <script type="text/javascript"> document.onload = function() { var canvas = document.getElementById("aaa"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "/game3/map.jpg"; img.onload = function() { ctx.drawImage(img, 0, 0); var src = ctx.getImageData(0, 0, canvas.width, canvas.height); var dst = ctx.createImageData(canvas.width, canvas.height); var x=width; var y=height; **var pixel[x][y] = (src.data[i] + src.data[i+1] + src.data[i+2]) / 3;** for(var y=1; y<height; y++;){ for(var x=1; x<width; x++;){ for (var i = 0; i < src.data.length; i=i+4) { dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel; dst.data[i+3] = src.data[i+3]; if(pixel<150){ pixel[x][y]="#";} }}} ctx.putImageData(dst, 0, 0); }; }; </script> <canvas id="c1" width="width" height="height"> </body> </html>

太字の部分にエラーが出ており、
"Uncaught SyntaxError: Unexpected token ["
と表示されています。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように変更したら、どうでしょう？

java
1var x=width; 
2var y=height; 
3
4// 追加：配列の初期化
5var pixel = new Array();
6for (var i=0; i<width; i++){ pixel[i] = new Array();}
7
8// var消す
9pixel[x][y] = (src.data[i] + src.data[i+1] + src.data[i+2]) / 3;

あとfor文に文法間違いがあります。

java
1正しいforループ
2    for(var y=1; y<height; y++){ 
3      for(var x=1; x<width; x++){

直した後の全コードは以下の通りです。

html
1<html> 
2<head> 
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
4<title>chenge</title> 
5<script type="text/javascript"></script> 
6<script type="text/javascript" src="canvas.js"></script> 
7</head> 
8<body> 
9<img src=/game3/map.jpg id=aaa>
10
11<script type="text/javascript"> 
12document.onload = function() { 
13  var canvas = document.getElementById("aaa"); 
14  var ctx = canvas.getContext("2d"); 
15  var img = new Image(); 
16  img.src = "./a.jpg"; 
17  img.onload = function() { 
18    ctx.drawImage(img, 0, 0); 
19    var src = ctx.getImageData(0, 0, canvas.width, canvas.height); 
20    var dst = ctx.createImageData(canvas.width, canvas.height);
21
22    var x=width; 
23    var y=height; 
24
25    var pixel = new Array();
26    for (var i=0; i<width; i++){ pixel[i] = new Array();}
27
28    pixel[x][y] = (src.data[i] + src.data[i+1] + src.data[i+2]) / 3;
29
30    for(var y=1; y<height; y++){ 
31      for(var x=1; x<width; x++){ 
32        for (var i = 0; i < src.data.length; i=i+4) { 
33          dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel; 
34          dst.data[i+3] = src.data[i+3]; 
35          if(pixel<150){ 
36              pixel[x][y]="#";
37          } 
38        }
39      }
40    }
41
42    ctx.putImageData(dst, 0, 0); 
43  }; 
44}
45</script>
46
47<canvas id="c1" width="width" height="height">
48
49</body> 
50</html>

投稿2016/02/12 15:15

編集2016/02/13 12:17

K_S_

総合スコア419

th3

2016/02/13 11:55

回答ありがとうございます。変更してみましたが、やはりエラーが出てしまいました。 document.onload = function() { var canvas = document.getElementById("aaa"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "/ゲーム3/map.jpg"; img.onload = function() { ctx.drawImage(img, 0, 0); var src = ctx.getImageData(0, 0, canvas.width, canvas.height); var dst = ctx.createImageData(canvas.width, canvas.height); var x=width; var y=height; var pixel = new Array(); for(var y=1; y<height; y++;){ pixel[x][y] = (src.data[i] + src.data[i+1] + src.data[i+2]) / 3; for(var x=1; x<width; x++;){ for (var i=0; i<width; i++){ pixel[i] = new Array();} dst.data[i] = dst.data[i+1] = dst.data[i+2] = pixel; dst.data[i+3] = src.data[i+3]; if(pixel<150){ pixel[x][y]="#";} }}} ctx.putImageData(dst, 0, 0); }; yのfor文でエラーが出てしまいました。やはり、プログラム自体無理なんでしょうか。