Vue et Canvas : Comment obtenir des effets de flou et de netteté sur les images

<template>
  <div>
    <input type="file" @change="onFileChange">
    <img :src="imageUrl" alt="图像">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    },
  },
};
</script>

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

<script>
export default {
  data() {
    return {
      canvasWidth: 500,
      canvasHeight: 400,
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    const context = canvas.getContext('2d');
    const imageUrl = 'https://example.com/image.jpg'; // 图像地址

    const image = new Image();
    image.onload = () => {
      context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
      this.applyBlurEffect(context); // 应用模糊效果
    };
    image.src = imageUrl;
  },
  methods: {
    applyBlurEffect(context) {
      const imageData = context.getImageData(0, 0, this.canvasWidth, this.canvasHeight);
      const data = imageData.data;
  
      for (let i = 0; i < data.length; i += 4) {
        const red = data[i];
        const green = data[i + 1];
        const blue = data[i + 2];
        const alpha = data[i + 3];
  
        // 简单的模糊算法，取上下左右四个像素的平均值
        const blurRed = (data[i - 4] + data[i + 4] + data[i - this.canvasWidth * 4] + data[i + this.canvasWidth * 4]) / 4;
        const blurGreen = (data[i - 3] + data[i + 5] + data[i - this.canvasWidth * 4 + 1] + data[i + this.canvasWidth * 4 + 1]) / 4;
        const blurBlue = (data[i - 2] + data[i + 6] + data[i - this.canvasWidth * 4 + 2] + data[i + this.canvasWidth * 4 + 2]) / 4;
  
        data[i] = blurRed;
        data[i + 1] = blurGreen;
        data[i + 2] = blurBlue;
      }
  
      context.putImageData(imageData, 0, 0);
    },
  },
};
</script>

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

<script>
export default {
  data() {
    return {
      canvasWidth: 500,
      canvasHeight: 400,
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    const context = canvas.getContext('2d');
    const imageUrl = 'https://example.com/image.jpg'; // 图像地址

    const image = new Image();
    image.onload = () => {
      context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
      this.applySharpenEffect(context); // 应用锐化效果
    };
    image.src = imageUrl;
  },
  methods: {
    applySharpenEffect(context) {
      const imageData = context.getImageData(0, 0, this.canvasWidth, this.canvasHeight);
      const data = imageData.data;
  
      const weights = [
        0, -1, 0,
        -1, 5, -1,
        0, -1, 0,
      ];
  
      for (let i = 0; i < data.length; i += 4) {
        const red = data[i];
        const green = data[i + 1];
        const blue = data[i + 2];
        const alpha = data[i + 3];
  
        let blurRed = 0;
        let blurGreen = 0;
        let blurBlue = 0;
  
        for (let j = -1; j <= 1; j++) {
          for (let k = -1; k <= 1; k++) {
            const index = i + (j * this.canvasWidth * 4) + (k * 4);
            const weight = weights[(j + 1) * 3 + (k + 1)];
  
            blurRed += data[index] * weight;
            blurGreen += data[index + 1] * weight;
            blurBlue += data[index + 2] * weight;
          }
        }
  
        data[i] = red + blurRed;
        data[i + 1] = green + blurGreen;
        data[i + 2] = blue + blurBlue;
      }
  
      context.putImageData(imageData, 0, 0);
    },
  },
};
</script>