Vue を通じて画像のランダムな歪みや歪みを実現するにはどうすればよいですか?

npm install fabric --save

import fabric from 'fabric';

<template>
  <div class="image-wrapper">
    <input type="file" @change="handleUpload" />
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      image: null
    };
  },
  mounted() {
    this.canvas = new fabric.Canvas(this.$refs.canvas);
  },
  methods: {
    handleUpload(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        this.createImage(event.target.result);
      };
      reader.readAsDataURL(file);
    },
    createImage(url) {
      fabric.Image.fromURL(url, (img) => {
        this.image = img;
        this.canvas.add(this.image);
      });
    },
    distortImage() {
      // 在这里添加扭曲和畸变效果的代码
    }
  },
};
</script>

distortImage() {
  const distortionFactor = 30; // 扭曲系数，可以根据需要进行调整

  const points = this.image.getBoundingRect().getPoints(); // 获取图片的边界点集合

  points.forEach((point) => {
    const randomX = Math.random() * distortionFactor - distortionFactor / 2;
    const randomY = Math.random() * distortionFactor - distortionFactor / 2;

    point.x += randomX;
    point.y += randomY;
  });

  const path = new fabric.Path(points);
  this.canvas.add(path);
  this.canvas.remove(this.image);
  this.canvas.sendToBack(path);
}

<template>
  <div class="image-wrapper">
    <input type="file" @change="handleUpload" />
    <canvas ref="canvas"></canvas>
    <button @click="distortImage">扭曲图片</button>
  </div>
</template>

undo() {
  const lastPath = this.canvas.item(this.canvas.getObjects().length - 1);
  if (lastPath instanceof fabric.Path) {
    this.canvas.remove(lastPath);
    this.canvas.add(this.image);
    this.canvas.sendToBack(this.image);
  }
}

<template>
  <div class="image-wrapper">
    <input type="file" @change="handleUpload" />
    <canvas ref="canvas"></canvas>
    <button @click="distortImage">扭曲图片</button>
    <button @click="undo">撤销</button>
  </div>
</template>