CSS filter

まずfilterについて検討します.
まずfilterについて説明します.CSSでfilterを実現するには、実は簡単です.次のような声明を使用します.

.example {
  filter:  [];
}

たとえば、画像にグレースケール(grayscale)の特効を追加すると、次のようになります.

.example {
  filter: grayscale(90%);
}

もちろん、ブラウザの互換性のためには、次のように書いたほうがいいです.

.example {
  -webkit-filter: grayscale(90%);
  filter: grayscale(90%);
}

フィルタの属性値の単位は通常0から1の間である可能性があるが、blurは画素「px」を単位とし、hue-rotateは角度degを基本単位として使用するなど、そうではない場合がある.

.example {
  filter: blur(10px);
}
.example-2 {
  filter: hue-rotate(90deg);
}

しかし、毎回1つのfilterしか使えないと面倒なので、CSSはより便利な書く形式を提供し、直接並べて書くことができます.

.example {
  filter: grayscale(0.5) blur(10px);
}

これにより、1つの要素に複数のfilterプロパティを追加できます.
フィルタを簡単に話した後、簡単なピクチャエディタを作成します.

基本的なHTMLファイルの作成

ここでindexを作成します.html、コードも簡単です.

    
        
        

        
    

    
        

            
Image Editor

            
            

                
            

            
            

                

                    

                        Grayscale
                        
                    

                    

                        Blur
                        
                    

                    

                        Brightness
                        
                    

                    

                        Contrast
                        
                    

                    

                        Hue Rotate
                        
                    

                    

                        Opacity
                        
                    

                    

                        Invert
                        
                    

                    

                        Saturate
                        
                    

                    

                        Sepia
                        
                    

                    

                
            
  

            
            

                ![](images/aviary_heibai.jpg)
            
        

        
        


    

このファイルにはmainが されています.cssとmain.js,main.cssは はエディタのいくつかのレイアウトに して して、 のfilterの に して の をしていないで、 はエディタをして、だからユーザーがあるfilterの を える 、 はリアルタイムでユーザーに を せることができて、そこでこれらのfilterを するコードはmainに くべきです.jsの .
の の の のinputはfilterのプロパティ です. のfilterを に して に を えることができるので、 の filterのプロパティ は な に されています.
のindex.htmlはまた、 に ボックスを して、ユーザーに のURLを して、ユーザーが に ることをクリックすると、 たちはこの を エリアに します. の なjsコードを します.

function addImage(e) {
    var imgUrl = $("#imgUrl").val();
    if (imgUrl.length) {
        $("#imageContainer img").attr("src", imgUrl);
    }
    e.preventDefault();
}

//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);

のjsコードもmainに いてあります.jsの .ユーザーが で を できるようになったら、 の を することができます.
ユーザーが バーをスライドするたびに、 をユーザーに できます.そこで、ユーザーのmousemoveイベントを します( を してください):

$("input[type=range]").mousemove(editImage);

すなわち,ユーザがコントロールバーを するたびにeditImage を する.しかし、このような は ではないかもしれません. のユーザーのマウスがコントロールバーを れたとき、changeイベントを し、この の もeditImage に して することができるので、 のコードをこのように くことができます.

$("input[type=range]").mousemove(editImage).change(editImage);

editImage の
Input[type=range]のmousemoveとchangeイベントをeditImage に したので、editImageの コードを します.

function editImage() {
    var gs = $("#gs").val(); // grayscale
    var blur = $("#blur").val(); // blur
    var br = $("#br").val(); // brightness
    var ct = $("#ct").val(); // contrast
    var huer = $("#huer").val(); //hue-rotate
    var opacity = $("#opacity").val(); //opacity
    var invert = $("#invert").val(); //invert
    var saturate = $("#saturate").val(); //saturate
    var sepia = $("#sepia").val(); //sepia

    $("#imageContainer img").css("filter", 'grayscale(' + gs+
                                                     '%) blur(' + blur +
                                                     'px) brightness(' + br +
                                                     '%) contrast(' + ct +
                                                     '%) hue-rotate(' + huer +
                                                     'deg) opacity(' + opacity +
                                                     '%) invert(' + invert +
                                                     '%) saturate(' + saturate +
                                                     '%) sepia(' + sepia + '%)');

    $("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+
                                                     '%) blur(' + blur +
                                                     'px) brightness(' + br +
                                                     '%) contrast(' + ct +
                                                     '%) hue-rotate(' + huer +
                                                     'deg) opacity(' + opacity +
                                                     '%) invert(' + invert +
                                                     '%) saturate(' + saturate +
                                                     '%) sepia(' + sepia + '%)'); 

}

は です. たちはユーザーがコントロールバーをスライドするたびにvar gs=$("#gs")のようにします.val();の は する を して、それからJqueryのcss()の を じて ピクチャーにfilterの をプラスして、しかもあなたも ることができることを じて、この の はブラウザの を します

$("#imageContainer img").css("-webkit-filter",...)

このコードは にはimg で のような を しています.

![](images/aviary_heibai.jpg)

に、いくつかの を に したくない は、resetをクリックして の にリセットすることができます.

$('#imageEditor').on('reset', function () {
    setTimeout(function() {
        editImage();
    },0);
});

ここで する があるのは、ここでsettimeout はresetの を も く するために、 の に くとします.

$('#imageEditor').on('reset', function () {

        editImage();
    });

このとき、reset の は には し れています. っている に、すぐには えません.
ブラウザがindexを きます.htmlは、 の が られます.いくつかの のコントロールバーをドラッグして を することができます.------ では を します.