Vue中如何实现图片的马赛克效果？

npm install canvas

<template>  <div>    <canvas ref="canvas" style="display: none;"></canvas>    @@##@@  </div></template><script>export default {  name: "MosaicImage",  props: {    imageUrl: {      type: String,      required: true    },    pixelSize: {      type: Number,      default: 10    }  },  mounted() {    this.canvas = this.$refs.canvas;    this.image = this.$refs.image;    this.context = this.canvas.getContext("2d");  },  methods: {    processImage() {      this.canvas.width = this.image.width;      this.canvas.height = this.image.height;            this.context.drawImage(this.image, 0, 0);            const imageData = this.context.getImageData(        0,        0,        this.canvas.width,        this.canvas.height      );            for (let x = 0; x < imageData.width; x += this.pixelSize) {        for (let y = 0; y < imageData.height; y += this.pixelSize) {          const pixelData = this.getAveragePixel(            imageData,            x,            y,            this.pixelSize,            this.pixelSize          );                    this.setPixelData(imageData, pixelData, x, y, this.pixelSize, this.pixelSize);        }      }            this.context.putImageData(imageData, 0, 0);            const mosaicImageUrl = this.canvas.toDataURL();      this.$emit("mosaicImageGenerated", mosaicImageUrl);    },    getAveragePixel(imageData, x, y, width, height) {      let totalR = 0;      let totalG = 0;      let totalB = 0;            for (let i = x; i < x + width; i++) {        for (let j = y; j < y + height; j++) {          const pixelOffset = (j * imageData.width + i) * 4;          totalR += imageData.data[pixelOffset];          totalG += imageData.data[pixelOffset + 1];          totalB += imageData.data[pixelOffset + 2];        }      }            const pixelCount = width * height;      const averageR = Math.floor(totalR / pixelCount);      const averageG = Math.floor(totalG / pixelCount);      const averageB = Math.floor(totalB / pixelCount);            return [averageR, averageG, averageB, 255];    },    setPixelData(imageData, pixelData, x, y, width, height) {      for (let i = x; i < x + width; i++) {        for (let j = y; j < y + height; j++) {          const pixelOffset = (j * imageData.width + i) * 4;          imageData.data[pixelOffset] = pixelData[0];          imageData.data[pixelOffset + 1] = pixelData[1];          imageData.data[pixelOffset + 2] = pixelData[2];          imageData.data[pixelOffset + 3] = pixelData[3];        }      }    }  }};</script>

<template>  <div>    <mosaic-image :image-url="imageUrl" :pixel-size="10" @mosaic-image-generated="handleMosaicImageGenerated"></mosaic-image>    @@##@@  </div></template><script>import MosaicImage from "@/components/MosaicImage.vue";export default {  name: "App",  components: {    MosaicImage  },  data() {    return {      imageUrl: "path/to/your/image",      mosaicImageUrl: ""    };  },  methods: {    handleMosaicImageGenerated(url) {      this.mosaicImageUrl = url;    }  }};</script>