Fabric.js：如何保存没有背景图像的画布图像

如何解决Fabric.js：如何保存没有背景图像的画布图像

我是面料帆布的新手。我想将画布另存为不含背景图片的png文件。我尝试按照下面的代码保存画布，它保存了背景图片。

使用我的代码

<template>
    <canvas
        ref="can"
        id="canvas"
        width="500"
        height="500"
    ></canvas>
    <button @click="saveImage">save</button>
</template>
<script>
    import { fabric } from 'fabric'
    let canvas = new fabric.Canvas('c')
     mounted() {
         const ref = this.$refs.can
         canvas = new fabric.Canvas(ref)
         canvas.setBackgroundImage("https://www.test.com/background.png",canvas.renderAll.bind(canvas))
         fabric.Image.fromURL("https://www.test.com/pattern.png,function (patternImage) {
             patternImage.set({
                 selectable: true,lockScalingFlip: true,editable: true,})
             patternImage.scaleToHeight(120)
             patternImage.scaleToWidth(120)
             canvas.add(patternImage)
         }) 
     },method: {
         saveImage() {
             let dataURL = canvas.toDataURL({
                 format: 'png',multiplier: 2,})
              let file = new File([dataURL],"canvas.png")      
              saveAs(dataURL,"pretty image.png")
         }
     }
</script>

我尝试这样编码，但错误canvas._objects.toDataURL({...}) is not a function我这样编码，因为我将只选择画布中没有背景图像的对象

saveImage() {
    let dataURL = canvas._objects.toDataURL({
        format: 'png',})
    let file = new File([dataURL],"canvas.png")      
    saveAs(dataURL,"pretty image.png")
}

如何解决此问题。谢谢

解决方法

你可以在保存画布前去掉背景图片，保存后显示出来，没人会注意到。

canvas.setBackgroundImage(null);
canvas.renderAll();

// ... save your canvas here

canvas.setBackgroundImage(myBgImage)
canvas.renderAll()

由于 iframe 限制，此处无法下载，这是一个有效的 fiddle

const c = document.querySelector('canvas');
let bg;

const canvas = new fabric.Canvas(c);
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);

var bgImg = new Image();
bgImg.onload = function (img) {
    bg = new fabric.Image(bgImg,{
        width: 500,height: 500,});
        canvas.setBackgroundImage(bg)
        canvas.renderAll()
};
bgImg.src = "https://i.imgur.com/8rmMZI3.jpg"; 

var object1 = new fabric.Rect({
    fill: '#1565c0',left: 150,top: 150,width: 50,height: 50
});

var object2 = new fabric.Circle({
    radius: 15,fill: '#990000',left: 100,top: 100
});

canvas.add(object1,object2); 
canvas.renderAll();

const exportbutton = document.querySelector('button');
exportbutton.onclick = () => {

    canvas.setBackgroundImage(null);
    canvas.renderAll();

    let dataURL = canvas.toDataURL({
        format: 'png',multiplier: 2,})

    downloadDataUrl(dataURL);   

    canvas.setBackgroundImage(bg)
    canvas.renderAll()
    
}

async function downloadDataUrl(dataURL) {
    const blob = await fetch(dataURL).then(r => r.blob());
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.download = "my_image.png"
    a.href = url;
    a.click();
    URL.revokeObjectURL(url);
    a.remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<button>Export</button>
<canvas id="c"></canvas>