溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Ps濾鏡效果的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
效果預(yù)覽
思路
其實(shí)非常非常趕單~
CSS3多了一個(gè)filter的屬性，非常強(qiáng)大（兼容性一般）！
我們只要根據(jù)輸入的值/滑塊滑動(dòng)的值來(lái)動(dòng)態(tài)更改css中filter屬性的值即可
filter
使用直接就這樣
img {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%) opacity(0.5) //要多少屬性加多少;
}//html
<li>
<label for="contrast">對(duì)比度(0-200)：</label>
<input id="contrast" max="200" min="0" step="1" type="range">
<input id="contrast-val" class="val-box" type="number">
</li>
//js
//注冊(cè)過(guò)濾器
function filter(type) {
//獲取濾鏡類(lèi)型關(guān)聯(lián)的dom節(jié)點(diǎn)
//綁定change事件，還有回車(chē)按鍵事件
let ele = document.getElementById(type);
let ele_val = document.getElementById(type + '-val');
//輸入框輸入值按下回車(chē)，把值更新到滑塊上
ele_val.addEventListener('keyup',function(e){
if(e.keyCode == 13){
ele.value = ele_val.value;
//同時(shí)更新濾鏡效果
setCss(type, ele_val.value);
}
})
//滑塊滑動(dòng)的時(shí)候，把值更新在右邊的輸入框中
ele.addEventListener('change', function() {
ele_val.value = ele.value;
//同時(shí)更新濾鏡效果
setCss(type, ele_val.value);
});
}//html
<input id="file" type="file" accept="image/*">
<!-- 圖片預(yù)覽框 -->
<p>
<img id="img" src="" alt="">
</p>
//選擇文件
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]);
}
}//更新css屬性
function setCss(type, val) {
let img = document.getElementById('img');
//已經(jīng)存在某個(gè)濾鏡,更改濾鏡數(shù)值
if (img.style.filter.indexOf(type) > -1) {
//利用正則則出濾鏡名稱(chēng)更改其值
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})`
}
}注意
由于這個(gè)demo只是隨便寫(xiě)寫(xiě)，只是前幾天用到這個(gè)filter屬性感覺(jué)有點(diǎn)厲害，就拿來(lái)玩玩，文中的代碼寫(xiě)得很丑，也沒(méi)什么規(guī)范，只適用于‘寫(xiě)來(lái)玩玩’的范疇，一些輸入驗(yàn)證，節(jié)流，參數(shù)的規(guī)范都沒(méi)有做，見(jiàn)諒。
本來(lái)還打算做一個(gè)導(dǎo)出使用濾鏡后的照片的，用的html2canvas來(lái)截圖導(dǎo)出，然后發(fā)現(xiàn)，它不支持?。?！不支持這個(gè)css屬性！！截出來(lái)的圖是原圖！這可是真的難受啊馬飛，現(xiàn)在還沒(méi)有解決方案，如果有大佬知道如何保存使用濾鏡后的圖片到本地的，請(qǐng)?jiān)谠u(píng)論區(qū)留下您的想法，非常感謝！
辣雞源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>photoshop-web</title>
</head>
<body>
<ul>
<li>
<label for="brightness">亮度(0-200)：</label>
<input id="brightness" max="200" min="0" step="1" type="range">
<input id="brightness-val" class="val-box" type="number">
</li>
<li>
<label for="contrast">對(duì)比度(0-200)：</label>
<input id="contrast" max="200" min="0" step="1" type="range">
<input id="contrast-val" class="val-box" type="number">
</li>
<li>
<label for="grayscale">灰度(0-100)：</label>
<input id="grayscale" max="100" min="0" step="1" type="range">
<input id="grayscale-val" class="val-box" type="number">
</li>
<li>
<label for="saturate">飽和度(0-200)：</label>
<input id="saturate" max="200" min="0" step="1" type="range">
<input id="saturate-val" class="val-box" type="number">
</li>
<li>
<label for="opacity">透明度(0-100)：</label>
<input id="opacity" max="100" min="0" step="1" type="range">
<input id="opacity-val" class="val-box" type="number">
</li>
<li>
<label for="invert">反相(0-100)：</label>
<input id="invert" max="100" min="0" step="1" type="range">
<input id="invert-val" class="val-box" type="number">
</li>
</ul>
<button id="reset">重置效果</button>
<input id="file" type="file" accept="image/*">
<p>
<img id="img" src="" alt="">
</p>
</body>
<script>
//選擇文件
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]);
}
}
//重置效果
function reset() {
let reset_btn = document.getElementById('reset');
let val_boxes = document.getElementsByClassName('val-box');
let val_arr = Array.prototype.slice.call(val_boxes);
let img = document.getElementById('img');
reset_btn.addEventListener('click', function() {
//所有的數(shù)據(jù)輸入重置為空
val_arr.forEach(function(item) {
item.value = "";
});
//去掉圖片的css屬性
img.style.filter = "";
})
}
//注冊(cè)過(guò)濾器
function filter(type) {
//獲取濾鏡類(lèi)型關(guān)聯(lián)的dom節(jié)點(diǎn)
//綁定change事件
//更改右側(cè)輸入框的顯示的值，以及更新濾鏡效果
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);
});
}
//更新css屬性
function setCss(type, val) {
let img = document.getElementById('img');
//已經(jīng)存在某個(gè)濾鏡,更改濾鏡數(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})`
}
}
window.onload = function() {
//亮度
filter('brightness');
//對(duì)比度
filter('contrast');
//灰度
filter('grayscale');
//飽和度
filter('saturate');
//透明度
filter('opacity');
//反相
filter('invert');
//注冊(cè)重置
reset();
//注冊(cè)文件選擇
fileSelect();
}
</script>
</html>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享JavaScript實(shí)現(xiàn)Ps濾鏡效果的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼