vue canvas 拼接图片制作海报简易版

<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button style="margin-left: 20px" @click="add">添加</el-button>
      <el-button style="margin-left: 20px" type="success" @click="handleDown"
        >下载
      </el-button>
    </div>

    <canvas id="myCanvas"></canvas>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { baseImgUrl } from "@/api/utils";

onMounted(() => {
  initCancas();
});

let product_list = [
  {
    cover: "product/6455efe66a52a51a98642da71690451253763.jpg",
    name: "云南元谋冬枣9kg装一级泡沫箱装大果",
    width: 100,
    height: 100,
    price: 100
  },
  {
    cover: "product/6455efe66a52a51a98642da71719627894157.jpg",
    name: "曲靖华硕苹果21kg筐装一级",
    width: 100,
    height: 100,
    price: 120
  },
  {
    cover: "product/6455efe66a52a51a98642da71705285150862.jpg",
    name: "陕西甜王西瓜22kg纸箱装一级",
    width: 100,
    height: 100,
    price: 68
  },
  {
    cover: "product/6455efe66a52a51a98642da71705285150862.jpg",
    name: "陕西甜王西瓜22kg纸箱装一级",
    width: 100,
    height: 100,
    price: 68
  },
  {
    cover: "product/6455efe66a52a51a98642da71705285150862.jpg",
    n