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

資訊專欄INFORMATION COLUMN

JavaScript寫一個簡單的Ps濾鏡效果

王陸寬 / 3169人閱讀

摘要:給圖像設置一個陰影效果。一值設定圖像會被調(diào)整的色環(huán)角度值。的價值是完全反轉(zhuǎn)。超過的值是允許的,則有更高的飽和度。值為則完全是深褐色的,值為圖像無變化。

效果預覽

思路

其實非常非常趕單~
CSS3多了一個filter的屬性,非常強大(兼容性一般)!
我們只要根據(jù)輸入的值/滑塊滑動的值來動態(tài)更改css中filter屬性的值即可

filter

none 默認值,沒有效果。

blur(px) 給圖像設置高斯模糊。"radius"一值設定高斯函數(shù)的標準差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;不接受百分比值。

brightness(%) 給圖片應用一種線性乘法,使其看起來更亮或更暗。如果值是0%,圖像會全黑。值是100%,則圖像無變化。其他的值對應線性乘數(shù)效果。值超過100%也是可以的,圖像會比原來更亮。如果沒有設定值,默認是1。

contrast(%) 調(diào)整圖像的對比度。值是0%的話,圖像會全黑。值是100%,圖像不變。值可以超過100%,意味著會運用更低的對比。若沒有設置值,默認是1。

drop-shadow(h-shadow v-shadow blur spread color) 給圖像設置一個陰影效果。陰影是合成在圖像下面,可以有模糊度的,可以以特定顏色畫出的遮罩圖的偏移版本。 函數(shù)接受(在CSS3背景中定義)類型的值,除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似;不同之處在于,通過濾鏡,一些瀏覽器為了更好的性能會提供硬件加速

grayscale(%) 將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像,值為0%圖像無變化。值在0%到100%之間,則是效果的線性乘子。若未設置,值默認是0;

hue-rotate(deg) 圖像應用色相旋轉(zhuǎn)。"angle"一值設定圖像會被調(diào)整的色環(huán)角度值。值為0deg,則圖像無變化。若值未設置,默認值是0deg。該值雖然沒有最大值,超過360deg的值相當于又繞一圈。

invert(%) 反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價值是完全反轉(zhuǎn)。值為0%則圖像無變化。值在0%和100%之間,則是效果的線性乘子。 若值未設置,值默認是0。

opacity(%) 轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明,值為100%則圖像無變化。值在0%和100%之間,則是效果的線性乘子,也相當于圖像樣本乘以數(shù)量。 若值未設置,值默認是1。該函數(shù)與已有的opacity屬性很相似,不同之處在于通過filter,一些瀏覽器為了提升性能會提供硬件加速。

saturate(%) 轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和,值為100%則圖像無變化。其他值,則是效果的線性乘子。超過100%的值是允許的,則有更高的飽和度。 若值未設置,值默認是1。

sepia(%) 將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的,值為0%圖像無變化。值在0%到100%之間,則是效果的線性乘子。若未設置,值默認是0;

url() URL函數(shù)接受一個XML文件,該文件設置了 一個SVG濾鏡,且可以包含一個錨點來指定一個具體的濾鏡元素。

使用直接就這樣

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%) opacity(0.5) //要多少屬性加多少;
}
開始操作

寫一個過濾屬性滑塊和輸入框,互相綁定值,如果用vue就簡單了hhh

//html
     
  • //js //注冊過濾器 function filter(type) { //獲取濾鏡類型關(guān)聯(lián)的dom節(jié)點 //綁定change事件,還有回車按鍵事件 let ele = document.getElementById(type); let ele_val = document.getElementById(type + "-val"); //輸入框輸入值按下回車,把值更新到滑塊上 ele_val.addEventListener("keyup",function(e){ if(e.keyCode == 13){ ele.value = ele_val.value; //同時更新濾鏡效果 setCss(type, ele_val.value); } }) //滑塊滑動的時候,把值更新在右邊的輸入框中 ele.addEventListener("change", function() { ele_val.value = ele.value; //同時更新濾鏡效果 setCss(type, ele_val.value); }); }

    寫一個文件選擇,預覽圖片

    //html
    
    
    
    //選擇文件 function fileSelect() { let img = document.getElementById("img"); document.getElementById("file").onchange = function() { var reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; } reader.readAsDataURL(this.files[0]); } }

    寫一個根據(jù)輸入值更新CSS的方法

    //更新css屬性
    function setCss(type, val) {
      let img = document.getElementById("img");
      //已經(jīng)存在某個濾鏡,更改濾鏡數(shù)值
      if (img.style.filter.indexOf(type) > -1) {
        //利用正則則出濾鏡名稱更改其值
        let reg = new RegExp("(?<=" + type + ")" + "(.*)", "g")
        img.style.filter = img.style.filter.replace(reg, function(match) { return `(${val/100})` });
      } else {
        //直接添加新濾鏡
        img.style.filter += `${type}(${val/100})`
      }
    }
    注意

    由于這個demo只是隨便寫寫,只是前幾天用到這個filter屬性感覺有點厲害,就拿來玩玩,文中的代碼寫得很丑,也沒什么規(guī)范,只適用于‘寫來玩玩’的范疇,一些輸入驗證,節(jié)流,參數(shù)的規(guī)范都沒有做,見諒。

    本來還打算做一個導出使用濾鏡后的照片的,用的html2canvas來截圖導出,然后發(fā)現(xiàn),它不支持!!!不支持這個css屬性!!截出來的圖是原圖!這可是真的難受啊馬飛,現(xiàn)在還沒有解決方案,如果有大佬知道如何保存使用濾鏡后的圖片到本地的,請在評論區(qū)留下您的想法,非常感謝!

    辣雞源碼
    
    
    
    
      
      photoshop-web
    
    
    
      

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

    轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102579.html

    相關(guān)文章

    • JavaScript一個簡單Ps濾鏡效果

      摘要:給圖像設置一個陰影效果。一值設定圖像會被調(diào)整的色環(huán)角度值。的價值是完全反轉(zhuǎn)。超過的值是允許的,則有更高的飽和度。值為則完全是深褐色的,值為圖像無變化。 效果預覽 showImg(https://segmentfault.com/img/bVbpSTz?w=648&h=729); 思路 其實非常非常趕單~CSS3多了一個filter的屬性,非常強大(兼容性一般)!我們只要根據(jù)輸入的值/滑...

      voyagelab 評論0 收藏0
    • 利用CSS改變圖片顏色100種方法!

      摘要:前言說到對圖片進行處理,我們經(jīng)常會想到這類的圖像處理工具。或者是的時候,對圖片的對比度,陰影進行處理。過濾器通常被用于調(diào)整圖片,背景和邊界的渲染。最后,安利我們的公眾號前端指南。 前言 說到對圖片進行處理,我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者,我們經(jīng)常會需要處理一些特效,例如根據(jù)不同的狀態(tài),讓圖標顯示不同的顏色。或者是hover的時候,對圖片的對比度,陰影...

      Keven 評論0 收藏0
    • 利用CSS改變圖片顏色100種方法!

      摘要:前言說到對圖片進行處理,我們經(jīng)常會想到這類的圖像處理工具。或者是的時候,對圖片的對比度,陰影進行處理。過濾器通常被用于調(diào)整圖片,背景和邊界的渲染。最后,安利我們的公眾號前端指南。 前言 說到對圖片進行處理,我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者,我們經(jīng)常會需要處理一些特效,例如根據(jù)不同的狀態(tài),讓圖標顯示不同的顏色。或者是hover的時候,對圖片的對比度,陰影...

      pinecone 評論0 收藏0
    • 不得不收藏——IE中CSS-filter濾鏡小知識大全

      摘要:屬性特性描述可選值,布爾值,默認值為,啟用過濾器為不啟用過濾器。正常顯示,內(nèi)容對象將翻過來。,設置對象是否投影,布爾值,和,設置對象投影不透明度,,假如為那么該值無效。 前言 前段時間在做一個專題的時候用到了opacity不透明度屬性,因為設計圖上是半透明背景,白色文字 showImg(https://segmentfault.com/img/bVknaX); 所以在IE用到了其...

      yuanzhanghu 評論0 收藏0
    • CSS 濾鏡技巧與細節(jié)

      摘要:簡單來說,濾鏡就是提供類似的圖形特效,像模糊,銳化或元素變色等功能。常用用法既然是標題是你所不知道的技巧與細節(jié),那么比較常用的一些用法就不再贅述,通常我們見得比較多的濾鏡用法有使用生成毛玻璃效果使用生成整體陰影效果使用生成透明度本文主要介紹 CSS 濾鏡的不常用用法,希望能給讀者帶來一些干貨! 注意:ie不兼容 本文所描述的濾鏡,指的是 CSS3 出來后的濾鏡,不是 IE 系列時代的濾鏡,話...

      tinylcy 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <