JavaScript实现简单的Ps滤镜效果（附代码）-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

JavaScript实现简单的Ps滤镜效果（附代码）

不言

Mar 16, 2019 am 10:30 AM

htmljavascript

本篇文章给大家带来的内容是关于JavaScript实现简单的Ps滤镜效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

思路

其实非常非常赶单~
CSS3多了一个filter的属性，非常强大（兼容性一般）！
我们只要根据输入的值/滑块滑动的值来动态更改css中filter属性的值即可

filter

none 默认值，没有效果。
blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；不接受百分比值。
brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%) 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg) 图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%) 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%) 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%) 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%) 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url() URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

使用直接就这样

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

开始操作

写一个过滤属性滑块和输入框，互相绑定值，如果用vue就简单了hhh

//html
     <li>
      <label for="contrast">对比度(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
//注册过滤器
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);
  });
}

写一个文件选择，预览图片

//html
<input id="file" type="file" accept="image/*">
<!-- 图片预览框 -->
<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的方法

//更新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})`
  }
}

注意

由于这个demo只是随便写写，只是前几天用到这个filter属性感觉有点厉害，就拿来玩玩，文中的代码写得很丑，也没什么规范，只适用于‘写来玩玩’的范畴，一些输入验证，节流，参数的规范都没有做，见谅。
本来还打算做一个导出使用滤镜后的照片的，用的html2canvas来截图导出，然后发现，它不支持！！！不支持这个css属性！！截出来的图是原图！这可是真的难受啊马飞，现在还没有解决方案，如果有大佬知道如何保存使用滤镜后的图片到本地的，请在评论区留下您的想法，非常感谢！

辣鸡源码

<!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">对比度(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() {
    //所有的数据输入重置为空
    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(&#39;brightness&#39;);
  //对比度
  filter(&#39;contrast&#39;);
  //灰度
  filter(&#39;grayscale&#39;);
  //饱和度
  filter(&#39;saturate&#39;);
  //透明度
  filter(&#39;opacity&#39;);
  //反相  
  filter(&#39;invert&#39;);
  //注册重置
  reset();
  //注册文件选择
  fileSelect();
}
</script>

</html>

Atas ialah kandungan terperinci JavaScript实现简单的Ps滤镜效果（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:segmentfault. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Python vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Dari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AM

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Akan R.E.P.O. Ada Crossplay?

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.