如何保存画布只是形象，不是所有的帆布

Question

我有一个800x600的canvas例如我用fabricjs添加一个图像（200×200）。

我申请我的形象在几个过滤器和我想保存它，但就目前而言，我保存画布800x600的，我想只保存效果后，我的图片。

可能吗？

Answer 1

您可以使用FabricJS的这很像HTML的canvas.toDataURL

var dataURL = myFabricCanvas.toDataURL(); 

如果你想你的用户将其画布保存到本地磁盘canvas.toDataURL方法，你可以这样做：

• 从画布创建一个图像。
• 打开一个新的浏览器窗口
• 让用户该图像单击鼠标右键，另存为图片

这里是代码：

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

注意：如果您的图片托管在与.html不同的域名，您将收到CORS安全错误，并且canvas.toDataURL将失败。

Answer 2

试试这个

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

Answer 3

从最新的版本（下载和从GitHub编译），而这一次是你想要什么：

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

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