如何仅保存画布图像而不是整个画布？

Question

我有一个800x600的画布，例如我使用fabricjs添加了一张图片（200 x 200）。

我对我的图片应用了几个滤镜，我想保存它，但目前我只保存了800x600的画布，我想只保存图片后的效果。

这可能吗？

- user2823968

---

现在如何保存画布？ - akonsu

Answer 1

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

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

请查看问题fabric.js - 从canvas API的ImageData对象创建图像对象，仅针对kangax的评论。

- Tom

---

谢谢，自从1.2.4版本以来，这.__toDataURL(format, quality, cropping)已成为fabric.js的扩展，它非常完美并且工作得很好。 - user2823968

Answer 2

您可以使用FabricJS的canvas.toDataURL方法，它的工作方式类似于html的canvas.toDataURL。

var dataURL = myFabricCanvas.toDataURL();

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

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

以下是代码：

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

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

- markE

Answer 3

试试这个

<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-----------------------

- Sanjay Nakate