Canvas 如何只保存画布的图像而不是所有画布

我有一个800x600的例子，我使用添加一个图像（200 x 200）

我在我的图像上应用了几个过滤器，我想保存它，但目前，我保存的画布是800x600，我只想在效果后保存我的图片

---

有可能吗？

您可以使用FabricJS的canvas.toDataURL方法，该方法与html的canvas.toDataURL非常相似

var dataURL = myFabricCanvas.toDataURL();

如果希望用户将画布保存到本地磁盘，可以执行以下操作：

• 从画布创建图像
• 在新的浏览器窗口中打开该图像
• 让用户右键单击并另存为图像

以下是代码：

var win=window.open();
win.document.write("<img src='"+myFabricCanvas.toDataURL()+"'/>");

var-win=window.open（）；
win.document.write（“”）；

注意：如果您的映像托管在与.html不同的域上，则会出现CORS安全错误，canvas.toDataURL将失败。

尝试此操作

<button class="btn btn-success" id="rasterize">Convert Image To PNG</button>


//************************canvas to png image**********
    document.getElementById('rasterize').onclick = function() {
    if (!fabric.Canvas.supports('toDataURL')) {
      alert('This browser doesn\'t provide means to serialize canvas to an image');
    }
    else {

      window.open(canvas.toDataURL('png'));
      var gh=(canvas.toDataURL('png'));+
      alert(gh);
    }
    };
    //--------------end canvas to png image-----------------------

将图像转换为PNG
//************************画布到png图像**********
document.getElementById（'rasterize'）。onclick=function（）{
如果（！fabric.Canvas.supports（'toDataURL'））{
警报（“此浏览器不提供将画布序列化为图像的方法”）；
}
否则{
open（canvas.toDataURL（'png'）；
var gh=（canvas.toDataURL（'png'）+
警惕（gh）；
}
};
//--------------结束画布到png图像-----------------------

来自最新版本（从GitHub下载并编译），这是您想要的：

canvas.toDataURL(left, top, width, height);

---

请检查问题以获取kangax的评论。

现在如何保存画布？谢谢，有了这个。toDataURL（格式、质量、裁剪）是fabric.js自1.2.4版以来的一个扩展，它非常完美，工作正常