Question

我有一个canvas 800x600，我使用fabricjs添加一个图像（200 x 200）。

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

有可能吗？

Answer 1

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

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

仅针对kangax的评论检查问题fabric.js - create Image object from ImageData object of canvas API。

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

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

3 个答案: