Javascript 使用fabricjs（1.7.20）保存/打印时是否排除背景图像？

使用以下代码保存或打印时，如何从最终结果中排除画布背景图像？旁注：保存/打印在小提琴中似乎不起作用，但在我的机器/服务器上起作用。希望代码足够让你为我指明正确的方向

var canvas=newfabric.canvas（“c”）；
画布设置高度（616）；
画布设置宽度（446）；
canvas.setBackgroundImage（'https://i.imgur.com/4yOoOzl.jpg，canvas.renderal.bind（canvas），{}；
//拯救
函数下载（url、名称）{
//创建链接。设置href并下载。模拟dom单击
$（''）.attr({
href:url，
下载：姓名
})[0]。单击（）；
}
函数下载结构（画布，名称）{
//将画布转换为数据url并下载。
下载（canvas.toDataURL）({
乘数：2
})，名称+'.png'）；
}
//印刷品
函数printCanvas（）{
var dataUrl=document.getElementById（'c'）。toDataURL（/*数据乘数？*/）；//尝试使用此var将base64字符串保存到服务器
var windowContent=''；
windowContent+=“”
windowContent+=“打印画布”；
windowContent+=“”
windowContent+=''；
windowContent+=''；
windowContent+=''；
var printWin=window.open（''，''，宽度=340，高度=260'）；
printWin.document.open（）；
printWin.document.write（windowContent）；
}

画布{
边框：1px实心#dddddd；
边缘顶部：10px；
}

下载
打印

我最后做的是使用CSS设置我的背景图像：

canvas { background-image: url("https://i.imgur.com/4yOoOzl.jpg"); }

---

我最后做的是使用CSS设置我的背景图像：

canvas { background-image: url("https://i.imgur.com/4yOoOzl.jpg"); }

或者在下载之前，您可以使canvas.backgroundImage=null，然后在下载之后再次插入该图像

演示

var canvas=newfabric.canvas（“c”）；
画布设置高度（616）；
画布设置宽度（446）；
canvas.setBackgroundImage（'https://i.imgur.com/4yOoOzl.jpg，canvas.renderal.bind（canvas），{crossOrigin:“匿名”}；
canvas.add（新的fabric.Circle（{radius:50}））
//拯救
函数下载（url、名称）{
//创建链接。设置href并下载。模拟dom单击
$（''）.attr({
href:url，
下载：姓名
})[0]。单击（）；
}
函数下载结构（画布，名称）{
//将画布转换为数据url并下载。
var bgImage=canvas.backgroundImage；
canvas.backgroundImage=null；
canvas.renderAll（）；
下载（canvas.toDataURL）({
乘数：2
})，名称+'.png'）；
canvas.setBackgroundImage（bgImage，canvas.renderAll.bind（canvas））
}
//印刷品
函数printCanvas（）{
var dataUrl=canvas.toDataURL（/*数据乘数？*/）；//尝试使用此var将base64字符串保存到服务器
var windowContent=''；
windowContent+=“”
windowContent+=“打印画布”；
windowContent+=“”
windowContent+=''；
windowContent+=''；
windowContent+=''；
var printWin=window.open（''，''，宽度=340，高度=260'）；
printWin.document.open（）；
printWin.document.write（windowContent）；
}

画布{
边框：1px实心#dddddd；
边缘顶部：10px；
}

下载
打印

或者在下载之前，您可以使canvas.backgroundImage=null，然后在下载之后再次插入该图像

演示

var canvas=newfabric.canvas（“c”）；
画布设置高度（616）；
画布设置宽度（446）；
canvas.setBackgroundImage（'https://i.imgur.com/4yOoOzl.jpg，canvas.renderal.bind（canvas），{crossOrigin:“匿名”}；
canvas.add（新的fabric.Circle（{radius:50}））
//拯救
函数下载（url、名称）{
//创建链接。设置href并下载。模拟dom单击
$（''）.attr({
href:url，
下载：姓名
})[0]。单击（）；
}
函数下载结构（画布，名称）{
//将画布转换为数据url并下载。
var bgImage=canvas.backgroundImage；
canvas.backgroundImage=null；
canvas.renderAll（）；
下载（canvas.toDataURL）({
乘数：2
})，名称+'.png'）；
canvas.setBackgroundImage（bgImage，canvas.renderAll.bind（canvas））
}
//印刷品
函数printCanvas（）{
var dataUrl=canvas.toDataURL（/*数据乘数？*/）；//尝试使用此var将base64字符串保存到服务器
var windowContent=''；
windowContent+=“”
windowContent+=“打印画布”；
windowContent+=“”
windowContent+=''；
windowContent+=''；
windowContent+=''；
var printWin=window.open（''，''，宽度=340，高度=260'）；
printWin.document.open（）；
printWin.document.write（windowContent）；
}

画布{
边框：1px实心#dddddd；
边缘顶部：10px；
}

下载
打印

在透明画布上绘制并将背景图像放在下面的元素上？在透明画布上绘制并将背景图像放在下面的元素上？