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

【问题标题】：How to save just the image of the canvas and not all canvas如何只保存画布的图像而不是所有画布
【发布时间】：2013-10-03 23:05:21
【问题描述】：

例如，我有一个canvas 800x600，我使用fabricjs 添加一张图像 (200 x 200)。

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

有可能吗？

【问题讨论】：

你现在如何保存画布？

标签： canvas fabricjs javascript jquery html html5-canvas fabricjs

【解决方案1】：

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

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

请查看问题fabric.js - create Image object from ImageData object of canvas API 以获取 kangax 的评论。

【讨论】：

谢谢，this.__toDataURL(format, quality,cropping) 自 1.2.4 版以来的 fabric.js 的扩展，它很完美，并且运行良好

【解决方案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 将失败。

【讨论】：

【解决方案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-----------------------

【讨论】：