使用fabric简单导出小demo

<template>
    <div  >
    
        <canvas id="canvas" ref="canvas" width='800' height='500' style="border: 1px dashed #2a2aff"></canvas>
    
        <button @click="exportall()">导出base64</button>

    </div>
</template>
<script setup>

import { fabric } from 'fabric'


import { onMounted} from 'vue'
let canvas =null 

onMounted(()=> {

    canvas = new fabric.Canvas('canvas');//声明画布


//     var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
 
//   rect.on('selected', function() {//选中监听事件
 
//       console.log('selected a rectangle');
 
//   });
 
 
 
//   var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
 
//   circle.on('selected', function() {
 
//       console.log('selected a circle');
 
//   });
 
//   canvas.add(rect);
 
//   canvas.add(circle);


    canvas.setBackgroundImage('https://www.chinanews.com/tw/kong/news/2008/06-30/U48P4T8D1297818F107DT20080630210250.jpg', canvas.renderAll.bind(canvas),{crossOrigin: 'anonymous'});


    // canvas.setBackgroundImage('./car.png', canvas.renderAll.bind(canvas));


    // fabric.Image.fromURL('https://www.chinanews.com/tw/kong/news/2008/06-30/U48P4T8D1297818F107DT20080630210250.jpg', function(oImg) {
    //     canvas.add(oImg);
    // },{crossOrigin: 'anonymous'});


    console.log(canvas)


	
})

const exportall=()=>{


        let base64URl = canvas.toDataURL({
          formart: 'jpg',
          multiplier: 1
        });
        var imageBase64 = base64URl;
        console.log(imageBase64)


    

}



</script>

<style scoped>

</style>