How to adjust the tone and curve of pictures in Vue?

How to adjust the tone and curve of pictures in Vue

In Vue development, we often need to adjust the tone and curve of pictures to achieve better Visual effect. This article will introduce how to use Vue and some commonly used libraries to adjust the tone and curve of pictures, and come with code examples.

1. Tone adjustment

Tone adjustment is achieved by changing the color of the picture. In Vue, we can use the CSS filter attribute to adjust the tone.

The following is a simple example that shows how to use Vue and the filter property of CSS to adjust the hue of the image:

<template>
  <div>
    <img :src="imageSrc" alt="Original Image">
    <div>
      <label for="hueRange">Hue</label>
      <input type="range" id="hueRange" v-model="hue" min="-180" max="180">
    </div>
    <img :src="adjustedImageSrc" alt="Adjusted Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'original.jpg',
      hue: 0
    }
  },
  computed: {
    adjustedImageSrc() {
      return `adjusted.jpg?hue=${this.hue}`;
    }
  }
}
</script>

<style>
img {
  display: block;
  max-width: 100%;
  margin-bottom: 20px;
}

input {
  width: 200px;
}
</style>

In the above code, we use the v-model directive to adjust hue Bind to the range input element so that the sliding slider can change the hue value in real time. Then, through the computed attribute, we splice this value into the adjusted image path.

2. Curve adjustment

Curve adjustment is achieved by changing the brightness, contrast, saturation and other parameters of the picture. In Vue, we can use some JavaScript image processing libraries, such as CamanJS or pica, to perform curve adjustments.

The following is an example using the CamanJS library, showing how to use Vue and CamanJS to adjust the curve of the image:

<template>
  <div>
    <img :src="imageSrc" alt="Original Image">
    <div>
      <label for="brightnessRange">Brightness</label>
      <input type="range" id="brightnessRange" v-model="brightness" min="-100" max="100">
    </div>
    <div>
      <label for="contrastRange">Contrast</label>
      <input type="range" id="contrastRange" v-model="contrast" min="-100" max="100">
    </div>
    <div>
      <label for="saturationRange">Saturation</label>
      <input type="range" id="saturationRange" v-model="saturation" min="-100" max="100">
    </div>
    <img :src="adjustedImageSrc" alt="Adjusted Image">
  </div>
</template>

<script>
import Caman from 'caman';

export default {
  data() {
    return {
      imageSrc: 'original.jpg',
      brightness: 0,
      contrast: 0,
      saturation: 0,
    }
  },
  computed: {
    adjustedImageSrc() {
      const image = new Image();
      image.src = this.imageSrc;
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0, image.width, image.height);
      Caman(canvas, function () {
        this.brightness(this.brightness);
        this.contrast(this.contrast);
        this.saturation(this.saturation);
        this.render();
      });
      return canvas.toDataURL();
    }
  }
}
</script>

<style>
img {
  display: block;
  max-width: 100%;
  margin-bottom: 20px;
}

input {
  width: 200px;
}
</style>

In the above code, we use the v-model directive to combine brightness and contrast Bind saturation and range input elements. Then, in the computed attribute, we first draw the original image onto the canvas, then use CamanJS to perform curve adjustment, and finally convert the adjusted image into a Data URL and return it.

Summary:

By using Vue and some image processing libraries, we can easily adjust the tone and curve of the picture. In the above code example, by adjusting the value of the slider, the tone and curve effects of the image can be changed in real time. Developers can customize filter parameters according to needs to achieve cooler effects.

The above is the detailed content of How to adjust the tone and curve of pictures in Vue?. For more information, please follow other related articles on the PHP Chinese website!