Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam Vue?

Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam Vue?

Dalam pembangunan bahagian hadapan, selalunya perlu melakukan beberapa pemprosesan kesan khas pada imej, seperti menukar imej kepada skala kelabu atau hitam putih. Dalam Vue, kita boleh menggunakan beberapa teknik mudah untuk mencapai kesan ini. Artikel ini akan memperkenalkan cara melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam Vue dan melampirkan contoh kod yang sepadan.

Pemprosesan skala kelabu

Pemprosesan skala kelabu adalah untuk menukar gambar berwarna kepada gambar hitam dan putih, supaya gambar hanya mempunyai maklumat skala kelabu dan tiada maklumat warna. Berikut ialah contoh kod untuk melaksanakan pemprosesan skala kelabu dalam Vue:

<template>
  <div class="container">
    <img  :src="originalImage" class="original" @load="convertToGrayscale" alt="Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam Vue?" >
    <img  :src="grayscaleImage" class="grayscale" v-show="grayscale" alt="Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam 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>

Dalam kod di atas, kami mengikat imej melalui atribut src bagi teg <img alt="Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam Vue?" > Gambar warna asal. Apabila imej dimuatkan, gunakan kaedah convertToGrayscale untuk menukar imej kepada skala kelabu. Dalam kaedah ini, kami mencipta elemen kanvas, mendapatkan konteks kanvas melalui getContext('2d') dan kemudian melukis imej asal ke kanvas. Seterusnya, kami mendapatkan data piksel pada kanvas, menukar nilai RGB bagi setiap piksel kepada nilai kecerahan, kemudian mengemas kini nilai RGB dalam data piksel kepada nilai kecerahan, dan akhirnya meletakkan semula data piksel yang dikemas kini ke dalam kanvas. Akhir sekali, kanvas ditukar kepada pengekodan base64 imej dengan memanggil kaedah toDataURL dan terikat pada atribut src imej skala kelabu. <img alt="Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam 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="Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam Vue?" >
    <img  :src="blackAndWhiteImage" class="black-and-white" v-show="blackAndWhite" alt="Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam 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

Dalam kod di atas, kami menggunakan gaya scoped Vue untuk memastikan bahawa peraturan gaya hanya digunakan pada komponen semasa.

Pemprosesan hitam putih🎜🎜Pemprosesan hitam putih adalah untuk menukar gambar berwarna kepada gambar dengan hanya hitam dan putih. Berikut ialah contoh kod untuk melaksanakan pemprosesan hitam putih dalam Vue: 🎜rrreee🎜Dalam kod di atas, sama seperti pemprosesan skala kelabu, kami juga mencipta elemen kanvas dan melukis gambar warna asal ke dalam kanvas . Seterusnya, kami mendapatkan data piksel pada kanvas dan menukar nilai RGB setiap piksel kepada nilai kecerahan. Perbezaannya ialah kita membandingkan nilai kecerahan dengan nilai ambang 128, dan menetapkan piksel dengan kecerahan lebih daripada 128 sebagai putih, dan piksel dengan kecerahan kurang daripada 128 sebagai hitam. Akhir sekali, kami meletakkan semula data piksel ke dalam kanvas dan menukarkan kanvas kepada pengekodan asas64 imej dengan memanggil kaedah toDataURL. Akhir sekali, kami memaparkan imej hitam putih pada halaman sekali lagi melalui pengikatan data Vue. 🎜🎜Di atas adalah kaedah dan kod sampel untuk melaksanakan pemprosesan skala kelabu imej dan pemprosesan hitam putih dalam Vue. Teknik ini boleh membantu kami mencapai pelbagai kesan khas gambar dalam pembangunan bahagian hadapan. Semoga artikel ini dapat membantu anda! 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemprosesan imej skala kelabu dan hitam putih dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!