aida_front/src/component/Canvas/index.vue

<template>
  <div class="canvasBox">
    <!-- 画布编辑器 - 永久启用红绿图模式 -->
    <div class="canvas-wrapper">
      <CanvasEditor
        ref="canvasEditor"
        :enabledRedGreenMode="false"
      />
    </div>
	<div class="btn">123
		<div class="gallery_btn" @click="exportElement">Export</div>
	</div>
  </div>
</template>

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

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

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);
  }
};
const exportElement = ()=>{
	canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false}).then((rv)=>{
		console.log(rv)
		downloadBase64Image(rv,'canvas')
	})
}
function downloadBase64Image(base64Data, filename) {
  // 1. 提取MIME类型（自动处理各种Base64前缀）
  const mimeMatch = base64Data.match(/^data:(.+?);base64,/);
  if (!mimeMatch) {
    console.error('Invalid Base64 data');
    return;
  }
  // 2. 获取扩展名
  const mimeType = mimeMatch[1];
  const extension = mimeType.split('/')[1] || 'png';

  // 3. 转换Base64为Blob
  const byteString = atob(base64Data.split(',')[1]);
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([ab], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${filename}.${extension}`;
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
}
// 组件挂载时绑定键盘事件
onMounted(() => {});

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

<style scoped lang="less">
.canvasBox {
  width: 100%;
//   height: 100vh;
	height: 100%;
	display: flex;
	// flex-direction: column;
}
.btn{
	margin-top: auto;
}
.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>