如何利用Vue实现图片的拼接和合成处理？

npm install -g @vue/clivue create image-processingcd image-processingnpm run serve

"dependencies": {  "canvas": "^2.6.0",  "lodash": "^4.17.21",  "vuex": "^3.6.2"}

<template>  <div>    <input type="file" @change="handleUpload" />    <button @click="handleProcess">处理</button>    <canvas ref="canvas"></canvas>  </div></template><script>import { fabric } from 'fabric';import _ from 'lodash';export default {  data() {    return {      images: [],    };  },  methods: {    handleUpload(e) {      const files = e.target.files;      _.forEach(files, (file) => {        const reader = new FileReader();        reader.onload = (event) => {          this.images.push(event.target.result);        };        reader.readAsDataURL(file);      });    },    handleProcess() {      const canvas = this.$refs.canvas;      const context = canvas.getContext('2d');      const imageObjects = [];      _.forEach(this.images, (image, index) => {        const img = new Image();        img.onload = () => {          const fabricImage = new fabric.Image(img);          fabricImage.set({ left: index * 100, top: index * 100 });          imageObjects.push(fabricImage);          if (imageObjects.length === this.images.length) {            const width = _.maxBy(imageObjects, (obj) => obj.left + obj.width).left + canvas.width;            const height = _.maxBy(imageObjects, (obj) => obj.top + obj.height).top + canvas.height;            context.clearRect(0, 0, canvas.width, canvas.height);            canvas.width = width;            canvas.height = height;            _.forEachRight(imageObjects, (obj) => {              context.drawImage(obj.getElement(), obj.left, obj.top);            });          }        };        img.src = image;      });    },  },};</script>

<template>  <div id="app">    <ImageProcessing />  </div></template><script>import ImageProcessing from './components/ImageProcessing.vue';export default {  name: 'App',  components: {    ImageProcessing,  },};</script>