113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
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>
|