如何通过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>