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

發布時間：2021-11-06 15:04:38 來源：億速云閱讀：176 作者：iii 欄目：web開發

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

　　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，就可以看到相應的調節效果了。你可以拖動一些設置項的控制條來查看效果。

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

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

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

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

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

猜你喜歡

最新資訊

相關推薦

相關標簽