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

Question

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

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

可能吗？

Answer 1

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

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

检查问题fabric.js - 从 canvas API 的 ImageData 对象创建 Image 对象，仅用于 kangax 的评论。

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 将失败。

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