14736


[こちらのサイト](http://www.html5rocks.com/en/tutorials/canvas/imagefilters/?redirect_from_locale=ja#toc-
introduction)を参考にfilterで画像を編集できるボタンを作っています。

[code]

    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);
[/code]

[code]

    <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>
[/code]

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

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

よろしくお願いします。


CC BY-SA 3.0
2015-08-22T11:17:41.003
14730
2015-08-22T14:36:34.207
2015-08-22T14:35:55.393
5337
8415
question
javascript jquery html5 html5-canvas
Canvasの画像にフィルターを掛けたい

[code]

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

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

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

[code]

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

で動作しました。

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


CC BY-SA 3.0
2015-08-22T14:36:34.207
14736
2015-08-22T14:36:34.207
5337
14730
answer