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

jerryloveemily 發布于2019-08-28 18:12 / 1931人閱讀

摘要：原文來自效果圖本文主要是利用的和簡單的代碼來實現一個簡單的圖片編輯器，包括對圖片的透明度，黑白，圖片亮度等調節。簡單地說完之后，我們來動手創建一個簡單的圖片編輯器。

原文來自：https://jellybool.com/post/build-a-simple-image-editor-with-css-js

demo: https://jellybool.com/demo/image-editor

效果圖：

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

CSS filter

我們首先來探討一下filter。

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

.example {
  filter:  [];
}

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

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

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


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

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

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

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

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

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

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

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

創建基本的HTML文件

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




    
        
        Image Editor

        
    

    
        
            Image Editor

            
            
                
            

            
            
                
                    
                        Grayscale
                        
                    

                    
                        Blur
                        
                    

                    
                        Brightness
                        
                    

                    
                        Contrast
                        
                    

                    
                        Hue Rotate
                        
                    

                    
                        Opacity
                        
                    

                    
                        Invert
                        
                    

                    
                        Saturate
                        
                    

                    
                        Sepia

這個文件里，我們引入了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元素實現了類似下面的效果；

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

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

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

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

        editImage();
    });

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

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

Happy Hacking

云服務器 GPU云服務器簡單的上傳圖片js js編輯對圖片的處理簡單js圖片輪轉用js添加css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111086.html

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

摘要：原文來自效果圖本文主要是利用的和簡單的代碼來實現一個簡單的圖片編輯器，包括對圖片的透明度，黑白，圖片亮度等調節。簡單地說完之后，我們來動手創建一個簡單的圖片編輯器。原文來自：https://jellybool.com/post/build-a-simple-image-editor-with-css-js demo: https://jellybool.com/demo/i...

NSFish 2019-08-22 10:57 評論0 收藏0
ELSE 技術周刊(2017.11.13期)

摘要：騰訊空間超分辨率技術為用戶節省流量，處理效果和速度超谷歌技術在的標準下，處理速度在提升了，處理效果也有明顯提升。此外，也是業界首次實現移動端使用深度神經網絡進行超分辨率，并保證圖片能夠實時進行處理。值得一提的是的對應指標也在名單里。團隊分享魔幻語言 JavaScript 系列之 call、bind 以及上下文從一行代碼來看看 JavaScript 是一門多么魔幻的語言，順便談談 ...

caohaoyu 2019-08-21 17:38 評論0 收藏0
CSS相關文章

摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉換成原生動畫初來乍到，本文搬運自我月份在知乎發的文章。前端面試之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面試中經常被問到的。如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

FrozenMap 2019-08-29 14:21 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（一）

摘要：我覺得這方面的原因是當時對和的依賴，導致大家對的興趣不弄，錯過了最佳時機，這個其實跟百度自己的的技術棧有很大關系。這個阮一峰對于前端構建的變化吐槽過，說新的構建工具就是的構建工具。文章來源最近幾年，前端發展越來越迅速，各種萌新加入了前端這個大家庭，大有趕IOS、超Android的趨勢呀！同時，萌新們提出了各種前端工作問題，除了最基礎的html、css、js三板斧之外，最讓人頭疼的應...

KavenFan 2019-08-02 16:21 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（一）

摘要：我覺得這方面的原因是當時對和的依賴，導致大家對的興趣不弄，錯過了最佳時機，這個其實跟百度自己的的技術棧有很大關系。這個阮一峰對于前端構建的變化吐槽過，說新的構建工具就是的構建工具。文章來源最近幾年，前端發展越來越迅速，各種萌新加入了前端這個大家庭，大有趕IOS、超Android的趨勢呀！同時，萌新們提出了各種前端工作問題，除了最基礎的html、css、js三板斧之外，最讓人頭疼的應...

Yangyang 2019-08-22 11:01 評論0 收藏0