Comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue ?

Comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue ?

Dans le développement front-end, il est souvent nécessaire d'effectuer certains traitements d'effets spéciaux sur les images, comme la conversion d'images en niveaux de gris ou en noir et blanc. Dans Vue, nous pouvons utiliser quelques techniques simples pour obtenir ces effets. Cet article expliquera comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue, et joindra des exemples de code correspondants.

Traitement des niveaux de gris

Le traitement des niveaux de gris consiste à convertir les images couleur en images en noir et blanc, de sorte que l'image ne contienne que des informations en niveaux de gris et aucune information en couleur. Voici un exemple de code pour implémenter le traitement en niveaux de gris dans Vue :

<template>
  <div class="container">
    <img  :src="originalImage" class="original" @load="convertToGrayscale" alt="Comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue ?" >
    <img  :src="grayscaleImage" class="grayscale" v-show="grayscale" alt="Comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue ?" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalImage: 'path/to/original/image.jpg',
      grayscaleImage: '',
      grayscale: false
    };
  },
  methods: {
    convertToGrayscale() {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let img = document.querySelector('.original');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let data = imageData.data;
      for (let i = 0; i < data.length; i += 4) {
        let brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = brightness;
        data[i + 1] = brightness;
        data[i + 2] = brightness;
      }
      ctx.putImageData(imageData, 0, 0);
      this.grayscaleImage = canvas.toDataURL();
      this.grayscale = true;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.original, .grayscale {
  max-width: 300px;
}

.grayscale {
  display: none;
}
</style>

Dans le code ci-dessus, nous lions une image via l'attribut src de la balise <img alt="Comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue ?" > Image couleur originale. Lorsque l'image est chargée, utilisez la méthode convertToGrayscale pour convertir l'image en niveaux de gris. Dans la méthode, nous créons un élément canvas, obtenons le contexte du canevas via getContext('2d'), puis dessinons l'image originale sur le canevas. Ensuite, nous récupérons les données de pixels sur le canevas, convertissons la valeur RVB de chaque pixel en valeur de luminosité, puis mettons à jour la valeur RVB dans les données de pixels en une valeur de luminosité, et enfin remettons les données de pixels mises à jour dans le canevas. Enfin, le canevas est converti au codage base64 de l'image en appelant la méthode toDataURL et lié à l'attribut src de l'image en niveaux de gris. <img alt="Comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue ?" >标签的src属性绑定了一张原始彩色图片。当图片加载完毕后，通过convertToGrayscale方法将图片转换为灰度图。方法中，我们通过创建一个canvas元素，并通过getContext('2d')获取画布的上下文，然后绘制原始图片到画布中。接下来，我们获取画布上的像素数据，将每个像素的RGB值转换为亮度值，然后更新像素数据中的RGB值为亮度值，最后将更新后的像素数据放回画布中。最终，通过调用toDataURL方法将画布转换为图片的base64编码，并将其绑定到灰度图片的src属性上。

在上述代码中，我们使用了Vue的scoped样式，以确保样式规则只适用于当前组件。

黑白处理

黑白处理是将彩色图片转换为只有黑白两种颜色的图片。下面是在Vue中实现黑白处理的代码示例：

<template>
  <div class="container">
    <img  :src="originalImage" class="original" @load="convertToBlackAndWhite" alt="Comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue ?" >
    <img  :src="blackAndWhiteImage" class="black-and-white" v-show="blackAndWhite" alt="Comment implémenter le traitement des images en niveaux de gris et en noir et blanc dans Vue ?" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalImage: 'path/to/original/image.jpg',
      blackAndWhiteImage: '',
      blackAndWhite: false
    };
  },
  methods: {
    convertToBlackAndWhite() {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let img = document.querySelector('.original');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let data = imageData.data;
      for (let i = 0; i < data.length; i += 4) {
        let brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
        if (brightness > 128) {
          data[i] = 255;
          data[i + 1] = 255;
          data[i + 2] = 255;
        } else {
          data[i] = 0;
          data[i + 1] = 0;
          data[i + 2] = 0;
        }
      }
      ctx.putImageData(imageData, 0, 0);
      this.blackAndWhiteImage = canvas.toDataURL();
      this.blackAndWhite = true;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.original, .black-and-white {
  max-width: 300px;
}

.black-and-white {
  display: none;
}
</style>

在上述代码中，与灰度处理相似，我们同样创建一个canvas元素，并绘制原始彩色图片到画布中。接着，我们获取画布上的像素数据，并将每个像素的RGB值转换为亮度值。不同的是，我们通过比较亮度值与阈值128的大小，将亮度大于128的像素设为白色，亮度小于128的像素设为黑色。最后，我们将像素数据放回画布中，并通过调用toDataURL

Dans le code ci-dessus, nous utilisons le style scoped de Vue pour garantir que les règles de style s'appliquent uniquement au composant actuel.

Traitement noir et blanc🎜🎜Le traitement noir et blanc consiste à convertir des images couleur en images avec uniquement du noir et blanc. Voici un exemple de code pour implémenter le traitement en noir et blanc dans Vue : 🎜rrreee🎜 Dans le code ci-dessus, similaire au traitement en niveaux de gris, nous créons également un élément canvas et dessinons l'image couleur d'origine dans le canevas. . Ensuite, nous récupérons les données de pixels sur le canevas et convertissons la valeur RVB de chaque pixel en valeur de luminosité. La différence est que nous comparons la valeur de luminosité avec la valeur seuil de 128 et définissons les pixels avec une luminosité supérieure à 128 comme blancs et les pixels avec une luminosité inférieure à 128 comme noirs. Enfin, nous remettons les données de pixels dans le canevas et convertissons le canevas au codage base64 de l'image en appelant la méthode toDataURL. Enfin, nous affichons à nouveau l'image en noir et blanc sur la page via la liaison de données de Vue. 🎜🎜Ce qui précède est la méthode et l'exemple de code pour implémenter le traitement des images en niveaux de gris et le traitement en noir et blanc dans Vue. Ces techniques peuvent nous aider à obtenir divers effets spéciaux d’image lors du développement frontal. J'espère que cet article vous sera utile ! 🎜

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!