Fabric.js：如何在沒有背景圖像的情況下保存畫布圖像

Question

我是織物帆布的新手。 我想將畫布另存為沒有背景圖像的 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我這樣編碼canvas._objects.toDataURL({...}) is not a function因為我將只選擇畫布中沒有背景圖像的對象

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

如何解決這個問題。 謝謝

Answer 1

您可以在保存畫布之前將背景圖像刪除，然后在保存后顯示它，沒有人會注意到。

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

// ... save your canvas here

canvas.setBackgroundImage(myBgImage)
canvas.renderAll()

由於 iframe 限制，下載在這里不起作用，這是一個工作小提琴

 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>