let reg = newRegExp("(?<p style="white-space: normal;">注意</p><p>由于这个demo只是随便写写,只是前几天用到这个filter属性感觉有点厉害,就拿来玩玩,文中的代码写得很丑,也没什么规范,只适用于‘写来玩玩’的范畴,一些输入验证,节流,参数的规范都没有做,见谅。<br>本来还打算做一个导出使用滤镜后的照片的,用的html2canvas来截图导出,然后发现,它不支持!!!不支持这个css属性!!截出来的图是原图!这可是真的难受啊马飞,现在还没有解决方案,如果有大佬知道如何保存使用滤镜后的图片到本地的,请在评论区留下您的想法,非常感谢!</p><p>辣鸡源码</p><pre class="brush:php;toolbar:false">nbsp;html>
<meta>
<title>photoshop-web</title>
Nach dem Login kopieren
<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() {
//所有的数据输入重置为空
val_arr.forEach(function(item) {
item.value = "";
});
//去掉图片的css属性
img.style.filter = "";
})
}
//注册过滤器
function filter(type) {
//获取滤镜类型关联的dom节点
//绑定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);
});
}
//更新css属性
function setCss(type, val) {
let img = document.getElementById('img');
//已经存在某个滤镜,更改滤镜数值
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');
//对比度
filter('contrast');
//灰度
filter('grayscale');
//饱和度
filter('saturate');
//透明度
filter('opacity');
//反相
filter('invert');
//注册重置
reset();
//注册文件选择
fileSelect();
}
</script>
Das obige ist der detaillierte Inhalt vonJavaScript implementiert einen einfachen PS-Filtereffekt (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn