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

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的評論。