Javascript 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.setBackgroundImage(null);
canvas.renderAll();

// ... save your canvas here

canvas.setBackgroundImage(myBgImage)
canvas.renderAll()

由于iframe的限制，这里的下载无法工作，这里是一个工作区

const c=document.querySelector（'canvas'）；
让bg；
const canvas=新的fabric.canvas（c）；
canvas.setHeight（window.innerHeight）；
canvas.setWidth（window.innerWidth）；
var bgImg=新图像（）；
bgimgonload=函数（img）{
bg=新结构。图像（bgImg{
宽度：500，
身高：500，
});
canvas.setBackgroundImage（背景）
canvas.renderAll（）
};
bgImg.src=”https://i.imgur.com/8rmMZI3.jpg"; 
var object1=new fabric.Rect({
填写：“#1565c0”，
左：150，
排名：150，
宽度：50，
身高：50
});
var object2=新的fabric.Circle({
半径：15，
填写：“#990000”，
左:100,，
排名：100
});
canvas.add（object1、object2）；
canvas.renderAll（）；
const exportbutton=document.querySelector（'button'）；
exportbutton.onclick=（）=>{
canvas.setBackgroundImage（空）；
canvas.renderAll（）；
让dataURL=canvas.toDataURL({
格式：“png”，
乘数：2，
})
下载数据URL（数据URL）；
canvas.setBackgroundImage（背景）
canvas.renderAll（）
}
异步函数下载数据URL（数据URL）{
constblob=wait-fetch（dataURL）；
const url=url.createObjectURL（blob）；
常量a=document.createElement（'a'）；
a、 下载=“my_image.png”
a、 href=url；
a、 单击（）；
revokeObjectURL（URL）；
a、 删除（）；
}

出口

什么是对象

toDataURL

只能在画布实例上调用，这就是为什么会得到一个is not a function错误。

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

// ... save your canvas here

canvas.setBackgroundImage(myBgImage)
canvas.renderAll()