aida_front/src/component/Canvas/index.vue

<template>
  <div class="red-green-mode-example">
    <!-- 画布编辑器 - 永久启用红绿图模式 -->
    <div class="canvas-wrapper">
      <div class="canvas-wrapper-btns">
        <div @click="getJSON">获取JSON</div>
        <div @click="loadJSON">读取JSON</div>
      </div>
      <CanvasEditor
        ref="canvasEditor"
        :enabledRedGreenMode="false"
        :clothingImageUrl="imageUrls.baseImage"
        :redGreenImageUrl="imageUrls.maskImage"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import CanvasEditor from "./CanvasEditor/index.vue";

// 画布编辑器引用
const canvasEditor = ref(null);

// 图像URL配置
const imageUrls = {
  baseImage: "@/assets/redGreenPic/clothing_base_image.png",
  maskImage: "@/assets/redGreenPic/clothing_mask_image.png",
};
const getJSON = () => {
  if (canvasEditor.value) {
    const json = canvasEditor.value.getJSON();
    console.log("获取的JSON数据：", json);
    localStorage.setItem("redGreenModeJSON", json);
  }
};

const loadJSON = () => {
  if (canvasEditor.value) {
    const currentJSON = localStorage.getItem("redGreenModeJSON");
    canvasEditor.value.loadJSON(currentJSON);
    console.log("加载的JSON数据：", currentJSON);
  }
};

// 组件挂载时绑定键盘事件
onMounted(() => {});

// 组件卸载时移除键盘事件
onUnmounted(() => {});
</script>

<style scoped lang="less">
.red-green-mode-example {
  width: 100%;
//   height: 100vh;
	height: 100%;
  display: flex;
  flex-direction: column;
}

.canvas-wrapper {
  flex: 1;
  position: relative;
}

.canvas-wrapper-btns {
  position: fixed;
  top: 0;
  right: 150px;
  z-index: 1000;
  display: flex;
  gap: 20px;
  & > div {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
}
</style>