Fabric.js : How to save canvas image without background image

I’m a new for fabric canvas. I wanna save canvas as png file without background image. I try save canvas following my code below, it’s saved background image.

In my code

<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>

I try coding like this but it error canvas._objects.toDataURL({...}) is not a function I coding like this because I will select only objects in canvas without background image

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

How to fix this problem. Thank

1 thought on “Fabric.js : How to save canvas image without background image”

  1. You can remove the background image before saving the canvas, then display it after saving it, and nobody will notice.

    canvas.setBackgroundImage(null);
    canvas.renderAll();
    
    // ... save your canvas here
    
    canvas.setBackgroundImage(myBgImage)
    canvas.renderAll()
    

    the download won’t work here because of the iframe restriction, here is a working 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>
    Reply

Leave a Comment