在vue项目中报错”Uncaught TypeError: Cannot read properties of undefined (reading 'save') at index.ts:822:22“

[jvhuaiying]

<template>
  <canvas class="container"></canvas>
</template>

<script setup>
import CanvasSelect from "canvas-select";

const instance = new CanvasSelect(
    ".container",
    "https://cdn.jsdelivr.net/npm/@heylight/cdn@%5E1/img/onepiece.png"
);
const option = [
  {
    label: "rect",
    labelFillStyle: "#f00",
    textFillStyle: "#fff",
    fillStyle: "rgba(130,22,220,.6)",
    coor: [
      [184, 183],
      [275, 238]
    ],
    type: 1
  },
  {
    label: "polygon",
    active: true,
    coor: [
      [135, 291],
      [129, 319],
      [146, 346],
      [174, 365],
      [214, 362],
      [196, 337],
      [161, 288]
    ],
    type: 2
  },
  {
    label: "dot",
    coor: [345, 406],
    type: 3
  },
  {
    label: "line",
    coor: [
      [470, 155],
      [503, 230],
      [506, 298]
    ],
    type: 4
  },
  {
    label: "circle",
    coor: [369, 197],
    radius: 38,
    type: 5
  }
];
instance.labelMaxLen = 10;
instance.setData(option);
// 选中
instance.on("load", (src) => {
  console.log("image loaded", src);
});
// 添加
instance.on("add", (info) => {
  console.log("add", info);
  window.info = info;
});
// 删除
instance.on("delete", (info) => {
  console.log("delete", info);
  window.info = info;
});
// 选中
instance.on("select", (shape) => {
  console.log("select", shape);
  window.shape = shape;
});
instance.on("updated", (result) => {
  // console.log('标注结果', result)
  const list = [...result];
  list.sort((a, b) => a.index - b.index);
  output.value = JSON.stringify(list, null, 2);
});

function change(num) {
  instance.createType = num;
}

function zoom(type) {
  instance.setScale(type);
}

function fitting() {
  instance.fitZoom();
}

function changeData() {
  const data = JSON.parse(output.value);
  instance.setData(data);
}

function onFocus() {
  instance.setFocusMode(!instance.focusMode);
}
</script>

<style scoped>

</style>

[heylight]

请通过SourceMap定位出具体的错误信息

[jvhuaiying]

[heylight]

初步推测，CanvasSelect实例的创建早于canvas节点加载，实例找不到canvas节点。
请在vue的生命周期‎onMounted中，也就是dom加载完成之后再创建CanvasSelect实例。

[jvhuaiying]

收到，感谢！