xxl-fabric-editor

Installation

npm install view-ui-plus
npm install xxl-fabric-editor

Usage

main.js

"use strict":
import { createApp } from "vue";
import App from "./App";

import ViewUIPlus from 'view-ui-plus';
import 'view-ui-plus/dist/styles/viewuiplus.css';
import 'xxl-fabric-editor/lib/xxl-fabric-editor.css';

const app = createApp(App);
......
app.use(ViewUIPlus).mount("#app");
......

components.vue

<template>
    <EditorMain @save="save" ref="editorMain" @editor-init="editorInit"></EditorMain>
<!--<EditorMain @save="save" ref="editorMain" @editor-init="editorInit">
        <template #template>
          <div>
            <p>模板</p>
          </div>
        </template>
        <template #material>
          <div>
            <p>素材</p>
          </div>
        </template>
    </EditorMain>-->
</template>
<script setup>
  import {EditorMain} from "xxl-fabric-editor";
  const { proxy } = getCurrentInstance();

  const editorInit = (editor) => {
      // load templateJson string
      //if(window.templateJson!=null){
      //    proxy.$refs.editorMain.loadJson(window.templateJson);
      //}
  };
  const save = (data) => {
      // save data (templateJson object include thumbnail base64image)
      //window.saveTemplate(data);
  };
</script>
<style scoped>

</style>

get base64image by templateJson and templateData

import {RenderCore} from "xxl-fabric-editor";

//template associated data
const templateData = {};

//template json string
const contentJson = JSON.parse(templateJsonString);
const canvas = document.createElement('canvas');
const workspace = contentJson.board.workspace;
canvas.width = workspace.width;
canvas.height = workspace.height;
const render = new RenderCore(new fabric.Canvas(canvas),contentJson.board);
render.loadJson(templateJsonString,()=>{
    const imageUrl = render.getDataURL(null,1,1,true);
    //use imageUrl
    console.log(imageUrl);
},templateData);

xxl-fabric-editor uses ViewUiPlus which is not compatible with element ui Plus. If using ElementUiPlus, please configure Vite to use multi entry mode and iframe

vite.config.js

build:{
    rollupOptions:{
        input: {
            main: path.resolve(__dirname, 'index.html'), // This is the ElementUI-Plus file here
            designer: path.resolve(__dirname, 'designer.html') //This is the xxl-fabric-editor component file here
        }
    }
}

xxxxxx.vue

<iframe ref="designerIframe" src="/designer.html" style="width: 100vh;height:100vh"></iframe>