14636


instagramでモノクロにしたり、彩度を変えたりする機能が欲しく  
filter cssというもので出来ると知りました。

現在このような状況で  
ファイル選択をすると選択した画像が下に出てきます。

[![画像の説明をここに入力](https://i.stack.imgur.com/cBnCC.png)](https://i.stack.imgur.com/cBnCC.png)

画像の下にボタンを設置して、それぞれのボタンに指定したbrightnessやcontrastを画像(#drawarea)に当てたいと考えています。

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

画像はcanにこのように呼んでおります。

彩度や透過度を変えるボタンは以下のように設置しています。

[code]

    <button id="eureka" data-filter="Eureka">エウレカボタン</button>
    
    [data-filter="Eureka"]      { -webkit-filter: brightness(160%) contrast(110%) grayscale(  0%) hue-rotate(  0deg) invert(10%) saturate( 90%) sepia(  0%); }
    
[/code]

この場合に、Script側でどのように書けばよいか分からず

[code]

    $("#eureka").on("click",function(){
    
    })
    
[/code]

このように中身がない状態になってしまっています。

どのように書けば画像(drawarea)に指定したcss(data-filter)を当てられるでしょうか？

よろしくお願いします。


CC BY-SA 3.0
2015-08-19T13:52:29.880
14629
2015-08-19T16:26:28.070
8415
question
javascript jquery css
filter cssを使ってボタンを押したら指定した彩度や透過度にしたい


`can.setAttribute("data-filter", "Eureka");`というように属性を追加します。  
質問でコードを貼り付けるときは、以下のようにコードスニペットの機能を使ってください。

[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 ) ;
    });
    
    
    $("#eureka").on("click",function(){
        can.setAttribute("data-filter", "Eureka");
    });
[/code]

[code]

    [data-filter="Eureka"]      { -webkit-filter: brightness(160%) contrast(110%) grayscale(  0%) hue-rotate(  0deg) invert(10%) saturate( 90%) sepia(  0%); }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <canvas id="drawarea"></canvas>
    <input type="file" id="select"></input>
    <button id="eureka" data-filter="Eureka">エウレカボタン</button>
[/code]

なお、[絵をかくようなアプリ(canvas)でundo機能を作りたい](https://ja.stackoverflow.com/questions/14529/)など、これまでの質問を毎回解決済みにせずに放置しているようですが、  
問題が解決したなら「解決済み」に設定してください。  
解決していないのなら質問に補足をしてください。


CC BY-SA 3.0
2015-08-19T16:26:28.070
14636
2015-08-19T16:26:28.070
2017-04-13T12:52:39.113
-1
10330
14629
answer