本篇內(nèi)容介紹了“怎么用CSS和JS打造一個簡單的圖片編輯器”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了科爾沁右翼前免費(fèi)建站歡迎大家使用！

CSS filter

我們首先來探討一下filter。

首先來說明一下filter，在CSS里面要實(shí)現(xiàn)filter，其實(shí)很簡單，使用類似下面的聲明方式：

1. .example {

2. 　　filter: [];

3. 　　}

             比如說，我們給圖片添加一點(diǎn)灰度(grayscale)特效，就可以這樣：

1. 　　.example {

2. 　　filter: grayscale(90%);

3. 　　}

當(dāng)然，為了瀏覽器兼容，我們最好這樣寫：

1. .example {

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

3. 　　filter: grayscale(90%);

4. 　　}

需要注意的是：filter的屬性值的單位通?？赡苁菑?到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. 　　}

這樣就可以實(shí)現(xiàn)對一個元素添加多個filter屬性。

簡單地說完filter之后，我們來動手創(chuàng)建一個簡單的圖片編輯器。

創(chuàng)建基本的HTML文件

在這里我們創(chuàng)建一個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其實(shí)是對編輯器的一些排版起的作用，并沒有對圖片的filter效果做出實(shí)際的影響，我們做的是編輯器，所以在用戶改變某個filter的值的時候，我們可以實(shí)時讓用戶看到效果，于是這些實(shí)現(xiàn)filter的代碼應(yīng)該就放在main.js里面。

上面的每一個

下面的

元素下面的input都是filter的一個屬性設(shè)置，因?yàn)槲覀兛梢酝瑫r用多個filter來對圖片產(chǎn)生特效，所以我每個filter的屬性值都設(shè)置為可以調(diào)節(jié)的狀態(tài)。

上面的index.html還要說明的是，在最上面我們提供一個輸入框，用于給用戶輸入圖片的URL，當(dāng)用戶點(diǎn)擊回車的時候，我們就將這張圖片顯示到編輯區(qū)域。使用的是下面的簡單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當(dāng)中。有了可以用戶自己添加圖片之后，我們就可以實(shí)現(xiàn)對圖片的編輯了：

每次用戶在滑動進(jìn)度條的時候，我們就可以將效果展示給用戶看，于是我們來監(jiān)聽用戶的mousemove事件：

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

也就是說，每次用戶在移動控制條的時候，我們都執(zhí)行editImage函數(shù)。

但是這樣的體驗(yàn)可能還不是最好，因?yàn)樵谧詈笥脩舻氖髽?biāo)離開控制條的時候，我們還可以監(jiān)聽change事件，把這一刻的變化也交給editImage函數(shù)處理，所以可以將上面的代碼寫成這樣：

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

2. 　　復(fù)制代碼編寫editImage函數(shù)

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

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. 　　}

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

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

2. 　　復(fù)制代碼

3. 　　這段代碼其實(shí)就是在img元素實(shí)現(xiàn)了類似下面的效果;

4. 　　

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

最后，如果你不想將某些特效加到圖片上面去，你可以點(diǎn)reset然后將圖片重置到原始狀態(tài)：

1. 

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

3. 　　setTimeout(function() {

4. 　　editImage();

5. 　　},0);

6. 　　});

這里需要說明一下的是，這里的setTimeout函數(shù)就是為了將reset的效果最快地展現(xiàn)出來，如果寫成下面的形式：

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

2. 　　editImage();

3. 　　});

這個時候，reset效果執(zhí)行起來其實(shí)是有一點(diǎn)延遲的，你明顯可以看到等待的時候，它并不是很快。

瀏覽器打開index.html，就可以看到相應(yīng)的調(diào)節(jié)效果了。你可以拖動一些設(shè)置項(xiàng)的控制條來查看效果。

“怎么用CSS和JS打造一個簡單的圖片編輯器”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！