Vue dan Kanvas: Cara melaksanakan fungsi pengindahan imej dan menghaluskan kulit-View.js-php.cn

Vue dan Canvas: Cara melaksanakan fungsi mencantikkan dan menghaluskan kulit pada gambar

Dalam beberapa tahun kebelakangan ini, fungsi mencantikkan dan menghaluskan kulit telah menjadi ciri standard dalam banyak aplikasi kamera telefon bimbit. Fungsi-fungsi ini bukan sahaja membuatkan pengguna lebih yakin apabila mengambil gambar swafoto, tetapi juga meningkatkan kualiti gambar pada tahap tertentu. Artikel ini akan memperkenalkan cara menggunakan teknologi Vue dan Canvas untuk merealisasikan fungsi pengindahan dan penurapan semula kulit gambar.

1. Fahami Vue dan Canvas

Pengenalan ringkas kepada Vue dan Canvas. Vue ialah rangka kerja progresif untuk membina antara muka pengguna yang menjadikan data menjadi paparan DOM dan mengemas kini paparan dalam masa nyata apabila data berubah. Kanvas ialah teg lukisan yang baru ditambah dalam HTML5, yang boleh digunakan untuk melukis grafik, animasi, dsb.

2. Persediaan

Sebelum memulakan pelaksanaan, kita perlu menyediakan beberapa kerja asas.

Buat projek Vue dan perkenalkan komponen Kanvas:

Masukkan arahan berikut pada baris arahan untuk mencipta projek Vue:

vue create beautify-app

Salin selepas log masuk

Kemudian, cipta komponen bernama Canvas.vue dalam direktori src/komponen, menunjukkan yang kita akan Komponen ini melaksanakan fungsi Kanvas.

Tambah fungsi muat naik imej:

Tambah teg input dalam Canvas.vue untuk menerima fail imej yang dimuat naik oleh pengguna.

<template>
  <div>
    <input type="file" @change="handleImageUpload" />
  </div>
</template>

Salin selepas log masuk

3. Laksanakan fungsi mencantikkan

Seterusnya kita akan melaksanakan fungsi mencantikkan gambar. Pertama, kita perlu memperkenalkan imej penapis untuk kecantikan dalam Canvas.vue.

Tambah gambar penapis:

Tambah gambar bernama beauty.png dalam direktori aset, yang digunakan sebagai penapis kecantikan.

Lukis gambar:

Dalam fungsi cangkuk yang dipasang, kami melukis gambar yang dimuat naik pada kanvas.

mounted() {
  this.canvas = this.$refs.canvas;
  this.context = this.canvas.getContext('2d');
  const image = new Image();
  image.src = this.imageUrl;
  image.onload = () => {
    this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
  };
},

Salin selepas log masuk

Gunakan penapis:

Selepas melukis imej, kami menggunakan kaedah getImageData Canvas dan kaedah putImageData untuk menggunakan imej penapis pada imej yang dimuat naik. getImageData方法和putImageData方法将滤镜图片应用于上传的图片上。

applyFilter() {
  const filterImage = new Image();
  filterImage.src = '@/assets/beautify.png';
  filterImage.onload = () => {
    const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
    const filterContext = this.createFilterContext(filterImage, imageData);
    this.context.putImageData(filterContext, 0, 0);
  };
},

Salin selepas log masuk

其中，createFilterContext方法用来创建滤镜效果的上下文，并将其返回。

四、实现磨皮功能

接下来，我们将实现磨皮功能。磨皮功能的实现主要依赖于Canvas的像素处理方法。

获取像素数据：

我们可以使用Canvas的getImageData方法获取图片的像素数据。

const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
const data = imageData.data;

Salin selepas log masuk

处理像素数据：

我们可以通过遍历像素数据，对每个像素进行处理。在这里，我们可以使用高斯模糊算法对像素进行模糊处理。

for (let i = 0, len = data.length; i < len; i += 4) {
  const red = data[i];
  const green = data[i + 1];
  const blue = data[i + 2];
  const alpha = data[i + 3];
  
  // 磨皮处理
  // ...
}

Salin selepas log masuk

绘制像素数据：

最后，我们使用putImageData方法将处理后的像素数据绘制到Canvas上。

const resultImageData = new ImageData(data, imageData.width, imageData.height);
this.context.putImageData(resultImageData, 0, 0);

Salin selepas log masuk

五、完善功能

完成上述步骤后，我们可以通过调用方法来实现图片的美颜和磨皮功能。

上传图片：

在handleImageUpload方法中，我们使用URL.createObjectURL方法生成一个指向用户上传图片的URL。

handleImageUpload(event) {
  const file = event.target.files[0];
  this.imageUrl = URL.createObjectURL(file);
},

Salin selepas log masuk

应用滤镜和磨皮：

在按钮的点击事件中，我们分别调用applyFilter方法和applySmoothing

<button @click="applyFilter">应用滤镜</button>
<button @click="applySmoothing">应用磨皮</button>

Salin selepas log masuk

Antaranya, kaedah createFilterContext digunakan untuk mencipta konteks kesan penapis dan mengembalikannya.

4. Realisasikan fungsi dermabrasion

Seterusnya, kita akan merealisasikan fungsi dermabrasion. Realisasi fungsi penurapan semula kulit bergantung terutamanya pada kaedah pemprosesan piksel Kanvas.

Dapatkan data piksel:

Kita boleh menggunakan kaedah getImageData Canvas untuk mendapatkan data piksel imej. 🎜

<template>
  <div>
    <input type="file" @change="handleImageUpload" />
    <button @click="applyFilter">应用滤镜</button>
    <button @click="applySmoothing">应用磨皮</button>

    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      canvas: null,
      context: null,
      canvasWidth: 400,
      canvasHeight: 300,
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext('2d');
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      this.imageUrl = URL.createObjectURL(file);
      const image = new Image();
      image.src = this.imageUrl;
      image.onload = () => {
        this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
      };
    },
    applyFilter() {
      const filterImage = new Image();
      filterImage.src = '@/assets/beautify.png';
      filterImage.onload = () => {
        const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
        const filterContext = this.createFilterContext(filterImage, imageData);
        this.context.putImageData(filterContext, 0, 0);
      };
    },
    applySmoothing() {
      const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
      const data = imageData.data;
      for (let i = 0, len = data.length; i < len; i += 4) {
        const red = data[i];
        const green = data[i + 1];
        const blue = data[i + 2];
        const alpha = data[i + 3];

        // 磨皮处理
        // ...

      }

      const resultImageData = new ImageData(data, imageData.width, imageData.height);
      this.context.putImageData(resultImageData, 0, 0);
    },
    createFilterContext(filterImage, imageData) {
      const filterCanvas = document.createElement('canvas');
      filterCanvas.width = this.canvas.width;
      filterCanvas.height = this.canvas.height;
      const filterContext = filterCanvas.getContext('2d');

      const pattern = filterContext.createPattern(filterImage, 'repeat');
      filterContext.fillStyle = pattern;
      filterContext.fillRect(0, 0, filterCanvas.width, filterCanvas.height);

      const filterImageData = filterContext.getImageData(0, 0, filterCanvas.width, filterCanvas.height);
      const filterData = filterImageData.data;
      const data = imageData.data;

      for (let i = 0, len = data.length; i < len; i += 4) {
        data[i] = data[i] * filterData[i] / 255;
        data[i + 1] = data[i + 1] * filterData[i + 1] / 255;
        data[i + 2] = data[i + 2] * filterData[i + 2] / 255;
      }

      return imageData;
    },
  },
};
</script>

Salin selepas log masuk

🎜🎜Memproses data piksel:🎜🎜🎜Kami boleh memproses setiap piksel dengan merentasi data piksel. Di sini kita boleh mengaburkan piksel menggunakan algoritma kabur Gaussian. 🎜rrreee🎜🎜Lukis data piksel: 🎜🎜🎜Akhir sekali, kami menggunakan kaedah putImageData untuk melukis data piksel yang diproses ke Kanvas. 🎜rrreee🎜 5. Memperbaiki fungsi 🎜🎜Setelah melengkapkan langkah di atas, kita boleh merealisasikan fungsi mencantikkan dan menumbuhkan semula kulit gambar dengan kaedah panggilan. 🎜🎜🎜Muat naik imej: 🎜🎜🎜Dalam kaedah handleImageUpload, kami menggunakan kaedah URL.createObjectURL untuk menjana URL yang menghala ke imej yang dimuat naik oleh pengguna. 🎜rrreee🎜🎜Gunakan penapis dan pelicinan: 🎜🎜🎜Sekiranya butang klik, kami memanggil kaedah applyFilter dan kaedah applySmoothing untuk menggunakan penapis dan melicinkan. . 🎜rrreee🎜 6. Ringkasan🎜🎜Melalui gabungan Vue dan Canvas, kita boleh dengan mudah merealisasikan fungsi mencantikkan dan menumpukan semula kulit pada gambar. Dengan memproses piksel Kanvas, kami boleh membangunkan algoritma pengindahan yang berbeza mengikut keperluan untuk memberikan pengalaman pengguna yang lebih baik. 🎜🎜Berikut ialah contoh kod Canvas.vue yang lengkap: 🎜rrreee🎜Dalam contoh ini, kami melaksanakan fungsi mencantikkan dan melicinkan kulit imej dengan melukis imej yang dimuat naik dan menggunakan penapis serta melicinkan kulit. Dengan menggunakan API Vue dan Canvas secara fleksibel, kami boleh menyesuaikan algoritma kecantikan yang berbeza mengikut keperluan dan memberikan pengalaman pengguna yang lebih baik. 🎜🎜Saya harap artikel ini dapat membantu anda memahami cara menggunakan Vue dan Canvas untuk melaksanakan fungsi mencantikkan dan menghaluskan kulit gambar. Selamat berprogram! 🎜

Atas ialah kandungan terperinci Vue dan Kanvas: Cara melaksanakan fungsi pengindahan imej dan menghaluskan kulit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!