Vue中如何实现图片的分割和拼接功能？

<template>  <div>    <div v-for="(img, index) in dividedImages" :key="index" :style="{ backgroundImage: 'url(' + img + ')' }"></div>  </div></template><script>export default {  computed: {    dividedImages() {      const bigImage = require('@/assets/big-image.jpg'); // 替换成你的大图片路径      const smallImageWidth = 100; // 替换成你的小图片宽度      const smallImageHeight = 100; // 替换成你的小图片高度      const row = 3; // 替换成你希望分割的行数      const col = 4; // 替换成你希望分割的列数      const dividedImages = [];      for (let i = 0; i < row; i++) {        for (let j = 0; j < col; j++) {          const xPos = j * smallImageWidth;          const yPos = i * smallImageHeight;          const bgPos = '-' + xPos + 'px -' + yPos + 'px';          dividedImages.push({            backgroundImage: `url('${bigImage}')`,            backgroundPosition: bgPos,            backgroundSize: 'cover',            width: smallImageWidth + 'px',            height: smallImageHeight + 'px',          });        }      }      return dividedImages;    },  },};</script>

<template>  <div>    <div :style="{ backgroundImage: 'url(' + combinedImage + ')' }"></div>  </div></template><script>export default {  data() {    return {      smallImages: [        require('@/assets/small-image1.jpg'), // 替换成你的小图片1路径        require('@/assets/small-image2.jpg'), // 替换成你的小图片2路径        require('@/assets/small-image3.jpg'), // 替换成你的小图片3路径      ],    };  },  computed: {    combinedImage() {      const combinedCanvas = document.createElement('canvas');      const ctx = combinedCanvas.getContext('2d');      combinedCanvas.width = 300; // 替换成你希望拼接图片的宽度      combinedCanvas.height = 200; // 替换成你希望拼接图片的高度      this.smallImages.forEach((img, index) => {        const x = index * 100; // 替换成你希望每张小图片的横坐标        const y = 0; // 替换成你希望每张小图片的纵坐标        const image = new Image();        image.src = img;        image.onload = () => {          ctx.drawImage(image, x, y);        };      });      return combinedCanvas.toDataURL();    },  },};</script>