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

105 thoughts on “Fabric.js : How to save canvas image without background image”

  1. Pingback: expired stromectol

Leave a Comment