communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Table des matières
开始操作
Maison interface Web js tutoriel JavaScript implémente un effet de filtre PS simple (avec code)

JavaScript implémente un effet de filtre PS simple (avec code)

不言
不言
Mar 16, 2019 am 10:30 AM
html javascript

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

效果预览

JavaScript implémente un effet de filtre PS simple (avec code)

思路

其实非常非常赶单~
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
     
  •                          
    • //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>
<!-- 图片预览框 -->
<p>
    <img  src="/static/imghw/default1.png" data-src="" class="lazy" 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的方法
    //更新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>



  
          
    •                          
      •     
    •                          
      •     
    •                          
      •     
    •                          
      •     
    •                          
      •     
    •                          
      •   
            

        JavaScript implémente un effet de filtre PS simple (avec code)   

    <script> //选择文件 function fileSelect() { let img = document.getElementById(&#39;img&#39;); document.getElementById(&#39;file&#39;).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(&#39;reset&#39;); let val_boxes = document.getElementsByClassName(&#39;val-box&#39;); let val_arr = Array.prototype.slice.call(val_boxes); let img = document.getElementById(&#39;img&#39;); reset_btn.addEventListener(&#39;click&#39;, 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 + &#39;-val&#39;); ele_val.addEventListener(&#39;keyup&#39;,function(e){ if(e.keyCode == 13){ ele.value = ele_val.value; setCss(type, ele_val.value); } }) ele.addEventListener(&#39;change&#39;, function() { ele_val.value = ele.value; setCss(type, ele_val.value); }); } //更新css属性 function setCss(type, val) { let img = document.getElementById(&#39;img&#39;); //已经存在某个滤镜,更改滤镜数值 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>

    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!

    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

    Outils d'IA chauds

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    Video Face Swap

    Video Face Swap

    Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

    Afficher plus

    Article chaud

    Guide de construction d'Agnes Tachyon | Un joli Musume Derby
    2 Il y a quelques semaines By Jack chen
    Oguri Cap Build Guide | Un joli Musume Derby
    3 Il y a quelques semaines By Jack chen
    Péx: comment raviver les joueurs
    4 Il y a quelques semaines By DDD
    Guide de construction de Grass Wonder | Uma musume joli derby
    1 Il y a quelques semaines By Jack chen
    Pic comment émoter
    3 Il y a quelques semaines By Jack chen
    Afficher plus

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Afficher plus

    Sujets chauds

    Où se trouve l'entrée de connexion pour la messagerie Gmail ?
    8646
    17
    Tutoriel Java
    1787
    16
    Tutoriel CakePHP
    1730
    56
    Tutoriel Laravel
    1582
    29
    Tutoriel PHP
    1451
    31
    Afficher plus
    Related knowledge
    Quel est le chargement = 'Lazy' l'un des attributs HTML et comment améliore-t-il les performances de la page? Quel est le chargement = 'Lazy' l'un des attributs HTML et comment améliore-t-il les performances de la page? Jul 01, 2025 am 01:33 AM

    Loading = "Lazy" est un attribut HTML pour et qui permet la fonction de chargement paresseuse native du navigateur pour améliorer les performances de la page. 1. Il retarde le chargement des ressources non écrans, réduit le temps de chargement initial, enregistre la bande passante et les demandes de serveur; 2. Il convient à de grandes quantités d'images ou de contenu intégré en pages longues; 3. Il ne convient pas aux images de premier écran, aux petites icônes ou à la charge paresseuse à l'aide de JavaScript; 4. Il est nécessaire de coopérer avec les mesures d'optimisation telles que la réglage des tailles et la compression des fichiers pour éviter les décalages de mise en page et assurer la compatibilité. Lorsque vous l'utilisez, vous devez tester l'expérience de défilement et peser l'expérience utilisateur.

    Quelles sont les meilleures pratiques pour écrire du code HTML valide et bien formé? Quelles sont les meilleures pratiques pour écrire du code HTML valide et bien formé? Jul 01, 2025 am 01:32 AM

    Lorsque vous écrivez un HTML légal et soigné, vous devez faire attention à une structure claire, à une sémantique correcte et à un format standardisé. 1. Utilisez la déclaration du type de document correct pour vous assurer que le navigateur analyse en fonction de la norme HTML5; 2. Gardez l'étiquette fermée et raisonnablement imbriquée pour éviter d'oublier des éléments de nidification fermés ou mauvais; 3. Utilisez des balises sémantiques telles que, etc. pour améliorer l'accessibilité et le référencement; 4. La valeur d'attribut est toujours enveloppée dans les devis et les devis simples ou doubles sont utilisés uniformément. Les attributs booléens n'ont qu'à exister, et le nom de classe doit être significatif et éviter les attributs redondants.

    Quels sont les éléments HTML essentiels pour structurer une page Web? Quels sont les éléments HTML essentiels pour structurer une page Web? Jul 03, 2025 am 02:34 AM

    La structure de la page Web doit être prise en charge par des éléments HTML de base. 1. La structure globale de la page est composée de, qui est l'élément racine, qui stocke les méta-informations et affiche le contenu; 2. L'organisation de contenu s'appuie sur le titre (-), le paragraphe () et les balises de blocs (telles que) pour améliorer la structure organisationnelle et le référencement; 3. La navigation est mise en œuvre et la mise en œuvre, les organisations couramment utilisées sont liées et complétées par un attribut Aria-Current pour améliorer l'accessibilité; 4. L'interaction de formulaire implique, et, pour assurer les fonctions complètes d'entrée et de soumission de l'utilisateur. Une utilisation appropriée de ces éléments peut améliorer la clarté de la page, la maintenance et l'optimisation des moteurs de recherche.

    Implémentation de la validation du formulaire côté client à l'aide d'attributs HTML. Implémentation de la validation du formulaire côté client à l'aide d'attributs HTML. Jul 03, 2025 am 02:31 AM

    Client-sideformvalidationCanbedOnewithoutjavascriptByusingHtmlattributes.1) userequagedoenforceMandatoryFields.2) valider eMandurlswithTypeatTributesLiDeMailorl, Orusepatternwithregexforcustusthormal

    Comment regrouper les options dans une liste déroulante sélectionnée à l'aide de HTML? Comment regrouper les options dans une liste déroulante sélectionnée à l'aide de HTML? Jul 04, 2025 am 03:16 AM

    Utilisez des balises dans HTML pour regrouper les options dans le menu déroulant. La méthode spécifique consiste à envelopper un groupe d'éléments et à définir le nom du groupe via l'attribut d'étiquette, tels que: 1. Contient des options telles que des pommes, des bananes, des oranges, etc.; 2. Contient des options telles que les carottes, le brocoli, etc.; 3. Chacun est un groupe indépendant, et les options du groupe sont automatiquement en retrait. Les notes incluent: ① Aucune nidification n'est prise en charge; ② L'ensemble du groupe peut être désactivé via l'attribut désactivé; ③ Le style est restreint et doit être embelli en combinaison avec CSS ou des bibliothèques tierces; Les plug-ins tels que select2 peuvent être utilisés pour améliorer les fonctions.

    Implémentation de boutons clickables à l'aide de l'élément de bouton HTML Implémentation de boutons clickables à l'aide de l'élément de bouton HTML Jul 07, 2025 am 02:31 AM

    Pour utiliser des éléments de bouton HTML pour réaliser des boutons cliquables, vous devez d'abord maîtriser son utilisation de base et ses précautions communes. 1. Créer des boutons avec des balises et définir les comportements via des attributs de type (tels que le bouton, soumettre, réinitialiser), qui est soumis par défaut; 2. Ajouter des fonctions interactives via JavaScript, qui peuvent être écrites en ligne ou lier les écouteurs d'événements via ID pour améliorer la maintenance; 3. Utilisez CSS pour personnaliser les styles, y compris la couleur d'arrière-plan, la bordure, les coins arrondis et les effets de survol / statut actif pour améliorer l'expérience utilisateur; 4. Faites attention aux problèmes communs: assurez-vous que l'attribut désactivé n'est pas activé, les événements JS sont correctement liés, la mise en page d'occlusion et utilisent l'aide des outils de développement pour dépanner les exceptions. Maîtriser ceci

    Comment définir une abréviation ou un acronyme à l'aide de la balise ? Comment définir une abréviation ou un acronyme à l'aide de la balise ? Jun 27, 2025 am 01:11 AM

    Notes sur l'utilisation des balises HTML: 1. Il doit être accompagné d'attribut de titre pour définir la signification complète de l'abréviation, comme HTML; 2. Utilisez uniformément au lieu de balises jetées; 3. Utilisez uniquement lorsque cela est nécessaire, évitez la nidification et ajustez le style par défaut via CSS pour améliorer l'accessibilité et les effets SEO.

    Quel est l'objectif de l'élément ? Quel est l'objectif de l'élément ? Jul 01, 2025 am 01:37 AM

    La fonction consiste à afficher des données bidimensionnelles structurées, telles que des feuilles de score, des horaires, etc.; Il n'est pas utilisé pour la mise en page des pages. La bonne façon de l'utiliser comprend: 1. Enveloppez la table entière avec; 2. Définissez l'en-tête de la table; 3. Contiennent le contenu principal; 4. représenter une ligne; 5. ou définissez une cellule. Les balises auxiliaires incluent: Ajouter un titre; définir les attributs de colonne; Affichez les informations de résumé inférieures. Remarques: Évitez les structures complexes, réduisez le nombre de colonnes pour améliorer l'expérience mobile et utilisez un cadre réactif pour optimiser l'effet d'affichage.

    See all articles