怎么用CSS和JS打造一個簡單的圖片編輯器

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

　　CSS filter

　　我們首先來探討一下filter。

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

1. <font size="3">.example {</font>

2. <font size="3">　　filter: [];</font>

3. <font size="3">　　}</font>

             <font size="3">比如說，我們給圖片添加一點灰度(grayscale)特效，就可以這樣：</font>

1. <font size="3">　　.example {</font>

2. <font size="3">　　filter: grayscale(90%);</font>

3. <font size="3">　　}</font>

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

1. <font size="3">.example {</font>

2. <font size="3">　　-webkit-filter: grayscale(90%);</font>

3. <font size="3">　　filter: grayscale(90%);</font>

4. <font size="3">　　}</font>

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

1. <font size="3">　.example {</font>

2. <font size="3">　　filter: blur(10px);</font>

3. <font size="3">　　}</font>

4. <font size="3">　　.example-2 {</font>

5. <font size="3">　　filter: hue-rotate(90deg);</font>

6. <font size="3">　　}</font>

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

1. <font size="3">　.example {</font>

2. <font size="3">　　filter: grayscale(0.5) blur(10px);</font>

3. <font size="3">　　}</font>

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

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

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

　　在這里我們創(chuàng)建一個index.html，代碼也比較簡單：

1. <font size="3">　Image Editor</font>

2. <font size="3">　　Grayscale</font>

3. <font size="3">　　Blur</font>

4. <font size="3">　　Brightness</font>

5. <font size="3">　　Contrast</font>

6. <font size="3">　　Hue Rotate</font>

7. <font size="3">　　Opacity</font>

8. <font size="3">　　Invert</font>

9. <font size="3">　　Saturate</font>

10. <font size="3">　　Sepia</font>

　　這個文件里，我們引入了main.css和main.js，main.css其實是對編輯器的一些排版起的作用，并沒有對圖片的filter效果做出實際的影響，我們做的是編輯器，所以在用戶改變某個filter的值的時候，我們可以實時讓用戶看到效果，于是這些實現(xiàn)filter的代碼應(yīng)該就放在main.js里面。

　　上面的每一個

　　下面的

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

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

1. <font size="3">　function addImage(e) {</font>

2. <font size="3">　　var imgUrl = $("#imgUrl").val();</font>

3. <font size="3">　　if (imgUrl.length) {</font>

4. <font size="3">　　$("#imageContainer img").attr("src", imgUrl);</font>

5. <font size="3">　　}</font>

6. <font size="3">　　e.preventDefault();</font>

7. <font size="3">　　}</font>

8. <font size="3">　　//on pressing return, addImage() will be called</font>

9. <font size="3">　　$("#urlBox").submit(addImage);</font>

　　上面的js代碼也是寫到main.js當中。有了可以用戶自己添加圖片之后，我們就可以實現(xiàn)對圖片的編輯了：

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

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

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

　　但是這樣的體驗可能還不是最好，因為在最后用戶的鼠標離開控制條的時候，我們還可以監(jiān)聽change事件，把這一刻的變化也交給editImage函數(shù)處理，所以可以將上面的代碼寫成這樣：

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

2. <font size="3">　　復(fù)制代碼編寫editImage函數(shù)</font>

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

4. <font size="3">　　function editImage() {</font>

5. <font size="3">　　var gs = $("#gs").val(); // grayscale</font>

6. <font size="3">　　var blur = $("#blur").val(); // blur</font>

7. <font size="3">　　var br = $("#br").val(); // brightness</font>

8. <font size="3">　　var ct = $("#ct").val(); // contrast</font>

9. <font size="3">　　var huer = $("#huer").val(); //hue-rotate</font>

10. <font size="3">　　var opacity = $("#opacity").val(); //opacity</font>

11. <font size="3">　　var invert = $("#invert").val(); //invert</font>

12. <font size="3">　　var saturate = $("#saturate").val(); //saturate</font>

13. <font size="3">　　var sepia = $("#sepia").val(); //sepia</font>

14. <font size="3">　　$("#imageContainer img").css("filter", 'grayscale(' + gs+</font>

15. <font size="3">　　'%) blur(' + blur +</font>

16. <font size="3">　　'px) brightness(' + br +</font>

17. <font size="3">　　'%) contrast(' + ct +</font>

18. <font size="3">　　'%) hue-rotate(' + huer +</font>

19. <font size="3">　　'deg) opacity(' + opacity +</font>

20. <font size="3">　　'%) invert(' + invert +</font>

21. <font size="3">　　'%) saturate(' + saturate +</font>

22. <font size="3">　　'%) sepia(' + sepia + '%)');</font>

23. <font size="3">　　$("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+</font>

24. <font size="3">　　'%) blur(' + blur +</font>

25. <font size="3">　　'px) brightness(' + br +</font>

26. <font size="3">　　'%) contrast(' + ct +</font>

27. <font size="3">　　'%) hue-rotate(' + huer +</font>

28. <font size="3">　　'deg) opacity(' + opacity +</font>

29. <font size="3">　　'%) invert(' + invert +</font>

30. <font size="3">　　'%) saturate(' + saturate +</font>

31. <font size="3">　　'%) sepia(' + sepia + '%)');</font>

32. <font size="3">　　}</font>

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

1. <font size="3">　$("#imageContainer img").css("-webkit-filter",...)</font>

2. <font size="3">　　復(fù)制代碼</font>

3. <font size="3">　　這段代碼其實就是在img元素實現(xiàn)了類似下面的效果;</font>

4. <font size="3">　　</font>

5. <font size="3">[img=28,30][/img]</font>

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

1. <font size="3">

2. 　　$('#imageEditor').on('reset', function () {</font>

3. <font size="3">　　setTimeout(function() {</font>

4. <font size="3">　　editImage();</font>

5. <font size="3">　　},0);</font>

6. <font size="3">　　});</font>

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

1. <font size="3">$('#imageEditor').on('reset', function () {</font>

2. <font size="3">　　editImage();</font>

3. <font size="3">　　});</font>

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

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

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