How to implement grayscale and black and white processing of images in Vue?

How to implement grayscale and black and white processing of images in Vue?

In front-end development, it is often necessary to perform some special effects processing on images, such as converting images to grayscale or black and white. In Vue, we can use some simple techniques to achieve these effects. This article will introduce how to implement grayscale and black-and-white processing of images in Vue, and attach corresponding code examples.

Grayscale processing

Grayscale processing is to convert color pictures into black and white pictures, so that the pictures only have grayscale information and no color information. The following is a code example to implement grayscale processing in Vue:

<template>
  <div class="container">
    <img  :src="originalImage" class="original" @load="convertToGrayscale" alt="How to implement grayscale and black and white processing of images in Vue?" >
    <img  :src="grayscaleImage" class="grayscale" v-show="grayscale" alt="How to implement grayscale and black and white processing of images in 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>

In the above code, we bind it through the src attribute of the <img alt="How to implement grayscale and black and white processing of images in Vue?" > tag An original color picture. When the image is loaded, use the convertToGrayscale method to convert the image to grayscale. In the method, we create a canvas element, obtain the context of the canvas through getContext('2d'), and then draw the original image to the canvas. Next, we get the pixel data on the canvas, convert the RGB value of each pixel into a brightness value, then update the RGB value in the pixel data to a brightness value, and finally put the updated pixel data back into the canvas. Finally, the canvas is converted to the base64 encoding of the image by calling the toDataURL method, and bound to the src attribute of the grayscale image.

In the above code, we use Vue’s scoped style to ensure that the style rules only apply to the current component.

Black and white processing

Black and white processing is to convert color pictures into pictures with only black and white. The following is a code example to implement black and white processing in Vue:

<template>
  <div class="container">
    <img  :src="originalImage" class="original" @load="convertToBlackAndWhite" alt="How to implement grayscale and black and white processing of images in Vue?" >
    <img  :src="blackAndWhiteImage" class="black-and-white" v-show="blackAndWhite" alt="How to implement grayscale and black and white processing of images in 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>

In the above code, similar to grayscale processing, we also create a canvas element and draw the original color picture to the canvas middle. Next, we get the pixel data on the canvas and convert the RGB value of each pixel into a brightness value. The difference is that by comparing the brightness value with the threshold 128, we set the pixels with a brightness greater than 128 as white, and the pixels with a brightness less than 128 as black. Finally, we put the pixel data back into the canvas and convert the canvas to the base64 encoding of the image by calling the toDataURL method. Finally, we display the black and white image on the page through Vue's data binding again.

The above is the method and sample code to implement image grayscale processing and black and white processing in Vue. These techniques can help us achieve various picture special effects in front-end development. Hope this article is helpful to you!

The above is the detailed content of How to implement grayscale and black and white processing of images in Vue?. For more information, please follow other related articles on the PHP Chinese website!