1

こちらのサイトを参考にfilterで画像を編集できるボタンを作っています。

var can = $("#drawarea")[0];
var context = can.getContext("2d");


$("#select").on("change",function(){
	var fileList = this.files ;
	if( 1 > fileList.length ){
		return false ;
	}
	var file = fileList[0] ;
	var fr = new FileReader() ;
	//読み込み後の処理
	fr.onload = function(){

		//[Image]クラスを起動
		var image = new Image() ;

		//読み込み完了後の処理
		image.onload = function(){

			//キャンパスに描画処理
			if ( can.getContext ) {

				//キャンパスのコンテキスト
				var context = can.getContext( "2d" ) ;

				//画像サイズを取得
				var width = this.width ;
				var height = this.height ;

				//キャンパスのサイズを決めておく
				can.width = 600 ;
				can.height = 315 ;

				//キャンパスにイメージを描画する
				context.drawImage( this , 0, 0 , width , height , 0 , 0 , 600 , 315 );

			}

		}

		//画像を読み込む
		image.src = this.result ;

	}

	//ファイルを[base64エンコード]として読み込む
	fr.readAsDataURL( file ) ;
});



Filters = {};

var grayscale = function(){
	   
      }

Filters.getPixels = function(img) {
  var c = this.getCanvas(img.width, img.height);
  var ctx = c.getContext('2d');
  ctx.drawImage(img);
  return ctx.getImageData(0,0,c.width,c.height);
};

Filters.getCanvas = function(w,h) {
  var c = document.createElement('drawarea');
  c.width = w;
  c.height = h;
  return c;
};

Filters.filterImage = function(filter, image, var_args) {
  var args = [this.getPixels(image)];
  for (var i=2; i<arguments.length; i++) {
    args.push(arguments[i]);
  }
  return filter.apply(null, args);
};

Filters.grayscale = function(pixels, args) {
  var d = pixels.data;
  for (var i=0; i<d.length; i+=4) {
    var r = d[i];
    var g = d[i+1];
    var b = d[i+2];
    // CIE luminance for the RGB
    // The human eye is bad at seeing red and blue, so we de-emphasize them.
    var v = 0.2126*r + 0.7152*g + 0.0722*b;
    d[i] = d[i+1] = d[i+2] = v
  }
  return pixels;
};

can.addEventListener("click", function(){
      grayscale();
}, false);
<canvas id="drawarea" width="500" height="300" style="border:1px solid black;"></canvas>

<input type="file" id="select">

<button onclick = "grayscale()">グレーボタン</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ただ、ボタンを押してもconsole上でエラーが出力され、つまずいています。

グレーボタンが押されたときのアクションをどのように記述すればよいでしょうか?

よろしくお願いします。

1 件の回答 1

0
Filters.getCanvas = function(w,h) {
  var c = document.createElement('drawarea');
  c.width = w;
  c.height = h;
  return c;
};

drawareaidです。Canvas要素を生成したいので、var c = document.createElement('canvas');になります。

Filters.filterImage()にはフィルター用のメソッドと、Canvas要素を渡せばよいようでしたので、

function grayscale(){
    var c = $("#drawarea")[0];
   var idata = Filters.filterImage(Filters.grayscale, c);
   var ctx = c.getContext('2d');
   ctx.putImageData(idata, 0, 0);
}

で動作しました。

元サイトに動作するサンプルがありますので、そのコードを読んでみてはどうでしょうか。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。