　　本文主要是利用 CSS的 filter和簡單的Jquery程式碼來實現一個簡單的圖片編輯器，包括對圖片的透明度，黑白，圖片亮度等調節。

　　CSS filter

　　我們首先來探討一下 filter。

　　首先來說明一下 filter，在CSS裡面要實現filter，其實很簡單，使用類似下面的宣告方式：
　　

1. .example {

2. 　　filter: [];

3. 　　}

比如說，我們給圖片新增一點灰度(grayscale)特效，就可以這樣：

1. 　　.example {

2. 　　filter: grayscale(90%);

3. 　　}

　　當然，為了瀏覽器相容，我們最好這樣寫：

1. .example {

2. 　　-webkit-filter: grayscale(90%);

3. 　　filter: grayscale(90%);

4. 　　}

　　需要注意的是： filter的屬性值的單位通常可能是從0到1之間，但是有些不是這樣的，比如blur是使用畫素'px'來作為單位的，而hue-rotate則使用角度deg來作為基本單位;

1. 　.example {

2. 　　filter: blur(10px);

3. 　　}

4. 　　.example-2 {

5. 　　filter: hue-rotate(90deg);

6. 　　}

　　但是如果每次只能使用一個 filter就比較麻煩了，所以CSS提供了更加方便的書寫形式，直接並排著寫：

1. 　.example {

2. 　　filter: grayscale(0.5) blur(10px);

3. 　　}

　　這樣就可以實現對一個元素新增多個 filter屬性。

　　簡單地說完 filter之後，我們來動手建立一個簡單的圖片編輯器。

　　建立基本的 HTML檔案

　　在這裡我們建立一個 index.html，程式碼也比較簡單：

1. 　Image Editor

2. 　　Grayscale

3. 　　Blur

4. 　　Brightness

5. 　　Contrast

6. 　　Hue Rotate

7. 　　Opacity

8. 　　Invert

9. 　　Saturate

10. 　　Sepia

　　這個檔案裡，我們引入了 main.css和main.js，main.css其實是對編輯器的一些排版起的作用，並沒有對圖片的filter效果做出實際的影響，我們做的是編輯器，所以在使用者改變某個filter的值的時候，我們可以實時讓使用者看到效果，於是這些實現filter的程式碼應該就放在main.js裡面。

　　上面的每一個

　　下面的

　　元素下面的 input都是filter的一個屬性設定，因為我們可以同時用多個filter來對圖片產生特效，所以我每個filter的屬性值都設定為可以調節的狀態。

　　上面的 index.html還要說明的是，在最上面我們提供一個輸入框，用於給使用者輸入圖片的URL，當使用者點選回車的時候，我們就將這張圖片顯示到編輯區域。使用的是下面的簡單js程式碼：

1. 　function addImage(e) {

2. 　　var imgUrl = $("#imgUrl").val();

3. 　　if (imgUrl.length) {

4. 　　$("#imageContainer img").attr("src", imgUrl);

5. 　　}

6. 　　e.preventDefault();

7. 　　}

8. 　　//on pressing return, addImage() will be called

9. 　　$("#urlBox").submit(addImage);

　　上面的 js程式碼也是寫到main.js當中。有了可以使用者自己新增圖片之後，我們就可以實現對圖片的編輯了：

　　每次使用者在滑動進度條的時候，我們就可以將效果展示給使用者看，於是我們來監聽使用者的 mousemove事件：

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

　　也就是說，每次使用者在移動控制條的時候，我們都執行 editImage函式。

　　但是這樣的體驗可能還不是最好，因為在最後使用者的滑鼠離開控制條的時候，我們還可以監聽 change事件，把這一刻的變化也交給editImage函式處理，所以可以將上面的程式碼寫成這樣：

1. font size="3">$("input[type=range]").mousemove(editImage).change(editImage);

2. 　　複製程式碼編寫editImage函式

3. 　　上面我們將input[type=range]的mousemove和change事件交給了editImage函式處理，所以，我們來編寫一下editImage的函式程式碼：

4. 　　function editImage() {

5. 　　var gs = $("#gs").val(); // grayscale

6. 　　var blur = $("#blur").val(); // blur

7. 　　var br = $("#br").val(); // brightness

8. 　　var ct = $("#ct").val(); // contrast

9. 　　var huer = $("#huer").val(); //hue-rotate

10. 　　var opacity = $("#opacity").val(); //opacity

11. 　　var invert = $("#invert").val(); //invert

12. 　　var saturate = $("#saturate").val(); //saturate

13. 　　var sepia = $("#sepia").val(); //sepia

14. 　　$("#imageContainer img").css("filter", 'grayscale(' + gs+

15. 　　'%) blur(' + blur +

16. 　　'px) brightness(' + br +

17. 　　'%) contrast(' + ct +

18. 　　'%) hue-rotate(' + huer +

19. 　　'deg) opacity(' + opacity +

20. 　　'%) invert(' + invert +

21. 　　'%) saturate(' + saturate +

22. 　　'%) sepia(' + sepia + '%)');

23. 　　$("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+

24. 　　'%) blur(' + blur +

25. 　　'px) brightness(' + br +

26. 　　'%) contrast(' + ct +

27. 　　'%) hue-rotate(' + huer +

28. 　　'deg) opacity(' + opacity +

29. 　　'%) invert(' + invert +

30. 　　'%) saturate(' + saturate +

31. 　　'%) sepia(' + sepia + '%)');

32. 　　}

　　其實很簡單，我們在每次使用者滑動控制條的時候，我們就透過類似 var gs = $("#gs").val();的語句取得相對應地值，然後透過Jquery的css()方法直接為圖片加上filter效果，而且相信你也看得出來，這個函式的後半段就是實現瀏覽器相容的

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

2. 　　複製程式碼

3. 　　這段程式碼其實就是在img元素實現了類似下面的效果;

4.

5. [img=28,30][/img]

　　最後，如果你不想將某些特效加到圖片上面去，你可以點 reset然後將圖片重置到原始狀態：

1.

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

3. 　　setTimeout(function() {

4. 　　editImage();

5. 　　},0);

6. 　　});

　　這裡需要說明一下的是，這裡的 setTimeout函式就是為了將reset的效果最快地展現出來，如果寫成下面的形式：

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

2. 　　editImage();

3. 　　});

　　這個時候， reset效果執行起來其實是有一點延遲的，你明顯可以看到等待的時候，它並不是很快。

　　瀏覽器開啟 index.html，就可以看到相應的調節效果了。你可以拖動一些設定項的控制條來檢視效果。

好程式設計師web前端分享用CSS和JS打造一個簡單的圖片編輯器

相關文章