Javascript 将fabricjs画布另存为电脑上的图像

我想通过单击我的html页面中的按钮，将织物画布保存为pc上的图像（jpg或png相同）。我尝试了一个解决方案，但不起作用：

function saveF(canvF) {
var imageCanv = canvF.toDataURL('png');
var myBlob = new Blob(['imageCanv'], { type: "image/png" });
var reader = new FileReader();
reader.onload = function (event) {
    var URL = canvF.toDataURL('png');
    document.getElementById("lnkDownload").href = URL;
};

reader.readAsDataURL(myBlob);}

这是html标记：

<a class="icon fb" href="" id="lnkDownload" download="canvas.png" style="float:left; background-color:red"><i class="fa fa-save"></i></a>

---

我创建了其他解决方案，但它们不起作用

这是我的解决方案，下载blob（有点黑客），你可以生成文本文件，或者其他更复杂的文件

function saveImage(e) {
    this.href = canvas.toDataURL({
        format: 'jpeg',
        quality: 0.8
    });
    this.download = 'canvas.png'
}

var canvas=newfabric.canvas（'imageCanvas'{
背景颜色：“rgb（240240）”
});
画布。设置宽度（300）；
画布设置高度（300）；
var imageLoader=document.getElementById（'imageLoader'）；
imageLoader.addEventListener（'change'，handleImage，false）；
函数handleImage（e）{
var objects=canvas.getObjects（）；
for（对象中的变量i）{
对象[i].remove（）；
}
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
var imgInstance=新结构图像（img{
可选：1
})
canvas.add（imgInstance）；
canvas.deactivateAll（）.renderAll（）；
}
img.src=event.target.result；
}
reader.readAsDataURL（e.target.files[0]）；
}
var imageSaver=document.getElementById（'lnkDownload'）；
imageSaver.addEventListener（'click'，saveImage，false）；
函数saveImage（e）{
this.href=canvas.toDataURL({
格式：“png”，
质量：0.8
});
this.download='canvas.png'
}

div#容器{
填充：30px；
字体系列：“verdana”，lucida；
}
输入{
背景色：#ccc；
填充：0；
宽度：300px；
颜色：#777；
}
a{
颜色：#777；
显示：块；
背景色：#ccc；
宽度：300px；
填充：0；
边缘顶部：2倍；
文字装饰：无；
}

我尝试了保存功能，但效果很好，只是一件事：图像背景是黑色的，为什么？我的画布容器覆盖了整个身体（那是白色的），所以画布和布料画布又是黑色的？在我的示例中，我只是使用了js函数将画布保存为js文件中的图像，但是使用了html和css。它可以工作，在canvas.png中，我看到了我绘制的所有图形，但背景是黑色的。也许我必须设置canvas.backgroundcolor属性？编辑：这是一个windows问题，使用paint我可以正确地看到图像。感谢againnote的

质量

参数仅适用于

'jpeg'

格式