2

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

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

画像の説明をここに入力

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

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 ) ;
});

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

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

<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%); }

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

$("#eureka").on("click",function(){

})

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

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

よろしくお願いします。

1 件の回答 1

1

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

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");
});
[data-filter="Eureka"]      { -webkit-filter: brightness(160%) contrast(110%) grayscale(  0%) hue-rotate(  0deg) invert(10%) saturate( 90%) sepia(  0%); }
<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>

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

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

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