用CSS和JS打造一個(gè)簡(jiǎn)單的圖片編輯器

NSFish 發(fā)布于2019-08-22 10:57 / 884人閱讀

摘要：原文來自效果圖本文主要是利用的和簡(jiǎn)單的代碼來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片編輯器，包括對(duì)圖片的透明度，黑白，圖片亮度等調(diào)節(jié)。簡(jiǎn)單地說完之后，我們來動(dòng)手創(chuàng)建一個(gè)簡(jiǎn)單的圖片編輯器。

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

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

效果圖：

本文主要是利用CSS的 filter和簡(jiǎn)單的Jquery代碼來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片編輯器，包括對(duì)圖片的透明度，黑白，圖片亮度等調(diào)節(jié)。

CSS filter

我們首先來探討一下filter。

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

.example {
  filter:  [];
}

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

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

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


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

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

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

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

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

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

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




    
        
        Image Editor

        
    

    
        
            Image Editor

            
            
                
            

            
            
                
                    
                        Grayscale
                        
                    

                    
                        Blur
                        
                    

                    
                        Brightness
                        
                    

                    
                        Contrast
                        
                    

                    
                        Hue Rotate
                        
                    

                    
                        Opacity
                        
                    

                    
                        Invert
                        
                    

                    
                        Saturate
                        
                    

                    
                        Sepia

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

上面的每一個(gè)

下面的

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

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

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

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

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

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

編寫editImage函數(shù)

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


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 + "%)"); 

}

其實(shí)很簡(jiǎn)單，我們?cè)诿看斡脩艋瑒?dòng)控制條的時(shí)候，我們就通過類似var gs = $("#gs").val();的語句取得相對(duì)應(yīng)地值，然后通過Jquery的css()方法直接為圖片加上filter效果，而且相信你也看得出來，這個(gè)函數(shù)的后半段就是實(shí)現(xiàn)瀏覽器兼容的

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

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

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

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

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

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

        editImage();
    });

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

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

Happy Hacking

云服務(wù)器 GPU云服務(wù)器簡(jiǎn)單的上傳圖片js js編輯對(duì)圖片的處理簡(jiǎn)單js圖片輪轉(zhuǎn) 用js添加css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91522.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

NSFish

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C++11 新特性詳解 1一覽表

閱讀 1032·2021-11-25 09:43
自學(xué)軟件測(cè)試6個(gè)月，找到了月薪8.5K的工作，多虧了這套學(xué)習(xí)方法

閱讀 1413·2021-11-18 10:02
#11.11#TmhHost：云服務(wù)器特價(jià)99元/季起，多地服務(wù)器永久7折起+每月減

閱讀 1814·2021-11-02 14:41
CSS3常見問題：100vh在移動(dòng)瀏覽器中不是固定的，恒定的

閱讀 2366·2019-08-30 15:55
JS繼承實(shí)現(xiàn)方式

閱讀 1067·2019-08-29 16:18
CSS 文字兩端對(duì)齊的樣式怎么寫？

閱讀 2552·2019-08-29 14:15
理解javaScript原型、原型鏈

閱讀 1390·2019-08-26 18:13
Deep In React 之詳談 React 16 Diff 策略(二)

閱讀 733·2019-08-26 10:27

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

用CSS和JS打造一個(gè)簡(jiǎn)單的圖片編輯器

Image Editor

相關(guān)文章