如何將畫布數據保存到文件

我使用node.js將畫布保存爲圖像 img in writeFile通過在我的畫布元素上使用toDataURL進行提取。它doenot保存文件這裏是我的代碼如何將畫布數據保存到文件

var fs = IMPORTS.require('fs'); 
var path = IMPORTS.require('path'); 
path.exists('images/', function(exists){ 
    if (exists) { 

     fs.writeFile('images/icon.png', img, function(err){ 
      if (err) 
       callback({ 
        error: false, 
        reply: err 
       }); 
      console.log('Resized and saved in'); 
      callback({ 
       error: false, 
       reply: 'success.' 
      }); 
     }); 
    } 
    else { 
     callback({ 
      error: true, 
      reply: 'File did not exist.' 
     }); 
    } 
});

來源

2011-05-03 sw-dev

您可以包含您的畫布代碼或您正在測試的網址，以便我們可以運行代碼而無需編寫任何樣板文件？（見http://sscce.org/）如果您希望人們提供幫助，您可能還想詳細說明您的描述。 – timoxley 2011-05-03 14:41:26

這裏是字面例如如何帆布數據保存到一個的NodeJS文件。變量img是由canvas.toDataURL()生成的字符串。我假定你已經知道如何將該字符串從瀏覽器發佈到你的Nodejs服務器。

HTML代碼段產生我使用的樣本圖像：

<canvas id="foo" width="20px" height="20px"></canvas> 
<script> 
var ctx = $('#foo')[0].getContext('2d'); 
for (var x = 0; x < 20; x += 10) { 
    for (var y = 0; y < 20; y += 10) { 
     if (x == y) { ctx.fillStyle = '#000000'; } 
     else { ctx.fillStyle = '#8888aa'; } 
     ctx.fillRect(x, y, 10, 10); 
    } 
} 
console.log($('#foo')[0].toDataURL()); 
</script>

的NodeJS片斷解碼BASE64數據並保存圖像：

fs = require('fs'); 
sys = require('sys'); 
// string generated by canvas.toDataURL() 
var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0" 
    + "NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO" 
    + "3gAAAABJRU5ErkJggg=="; 
// strip off the data: url prefix to get just the base64-encoded bytes 
var data = img.replace(/^data:image\/\w+;base64,/, ""); 
var buf = new Buffer(data, 'base64'); 
fs.writeFile('image.png', buf);

輸出：

enter image description here

來源

2011-05-11 23:22:30 samplebias

謝謝！我不知道我需要一個'Buffer'，我只是想用'base64.decode（）'和base64數據，但是生成了一個損壞的文件。 – Husky 2011-06-12 15:05:18

服務器代碼示例適用於我。有人可以解釋爲什麼它不適用於這些數據：http://pastebin.com/raw.php?i=3yhGiQWR – 2014-02-21 10:38:39

我得到緩衝undefined – Krishna 2016-08-19 13:30:06

我相信Canvas不會存儲它是Base64內部的數據。它應該以更高效的二進制格式存儲數據。所以，顯然，轉移到base64並返回到二進制PNG是非常緩慢和內存消耗。

快速谷歌搜索到node canvas documentation給出：

要創建PNGStream只需調用canvas.pngStream（），並且流將開始發射數據的事件，當完成時最後發射端。如果發生異常，則發出錯誤事件。

var fs = require('fs') 
    , out = fs.createWriteStream(__dirname + '/text.png') 
    , stream = canvas.pngStream(); 

stream.on('data', function(chunk){ 
    out.write(chunk); 
}); 

stream.on('end', function(){ 
    console.log('saved png'); 
});

目前只支持同步串流。如果你想做異步，你可以嘗試使用一個工人或集羣（我個人從未嘗試過）。

來源

2014-05-15 14:39:03 Dan

這個答案更好/更清潔/更強。 – 2014-07-09 13:06:25

console.log（'保存的png'）發生在文件保存之前。這是因爲只支持同步嗎？在保存文件之後，如何才能啓動事件？ – hamncheez 2017-02-17 22:59:36

如何將畫布數據保存到文件

回答

相關問題