Maison > Article > interface Web > JavaScript implémente un effet de filtre PS simple (avec code)
本篇文章给大家带来的内容是关于JavaScript实现简单的Ps滤镜效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
思路
其实非常非常赶单~
CSS3多了一个filter的属性,非常强大(兼容性一般)!
我们只要根据输入的值/滑块滑动的值来动态更改css中filter属性的值即可
filter
使用直接就这样
img { -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */ filter: contrast(200%) opacity(0.5) //要多少属性加多少; }
//html
//html <input> <!-- 图片预览框 --> <p> <img alt="JavaScript implémente un effet de filtre PS simple (avec code)" > </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'); //已经存在某个滤镜,更改滤镜数值 if (img.style.filter.indexOf(type) > -1) { //利用正则则出滤镜名称更改其值 let reg = new RegExp("(?<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>
<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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!