Writing png after capturing from webcam in node-webkit not working - node.js

Question

I am taking snapshot in html5 using the following code.
window.takeSnapshot = function(){
$("body").append("<canvas id='dummyCanvas' class='canvas' style='display: none'></canvas>");
var canvas = document.getElementById("dummyCanvas");
canvas.width = videoWidth;
canvas.height = videoHeight;
var context = canvas.getContext("2d");
var type = mediaType;
var tp = tupple;
context.drawImage(videoElement, 0, 0, videoWidth, videoHeight);
var contents = canvas.toDataURL('image/png');
var dt = new Date();
Message.showProgress();
var time = dt.getHours() + "_" + dt.getMinutes() + "_" + dt.getSeconds();
var file = {name: "Snapshot_" + time + ".png", contents: contents, recorded: true};
var id = "attachment_" + window.Guid();
var icon = (type==ContentTypes.Video)?("video.png"):((type==ContentTypes.Audio)?"audio.png":"image.png");
$("#attachments").append("<tr id='"+id+"'><td align='right'><img src='assets/images/progress.gif' style='width:16px'/></td><td><img src='assets/images/" + icon + "' style='width: 14px;' /></td><td style='font-size: 8pt; font-family: Arial; font-weight: bold;' style='text-decoration:none; color: #000000'>"+file.name+"</td></tr>");
Logger.log("Uploading " + file.name + " ...", LogTypes.INFO);
$("#mediaPanel").remove();
$("#attachmentPopup").show();
window.stream.stop();
var callback = function(){
Logger.log("Upload completed for " + file.name + " !", LogTypes.INFO);
CWDocumentWriter.addAttachment(tp, file.name, type);
$("#"+id).find('td').eq(0).html("<a href='javascript:void(0)' title='Delete attachment' onclick='window.deleteAttachment(["+tp[0]+","+tp[1]+","+tp[2]+","+tp[3]+"],\""+file.name+"\", event)'><img src='assets/images/delete.png' style='width:16px'/></a>");
$("#"+id).find('td').eq(2).html("<a href='javascript:void(0)' title='"+file.name+"' onclick='window.showContent(\"" + file.name + "\", " + type + ")'>"+file.name+"</a>");
Message.hideProgress();
};
if(Cloud.isLive())
Cloud.writeFile(file, contents, callback);
else{
var canvasImage = canvas.toDataURL("image/png").split(',')[1];
var decodedImg = window.atob(canvasImage);
var img = new Buffer(decodedImg, encoding='base64');
file.contents = img;
StorageManager.writeImageFile(file, contents, callback);
}
};
The image is uploaded to the cloud or saved on the local storage (using nodejs functions) depending upon the live or dead internet. It works fine in uploading the image data to the cloud and I can save and see the image back. But in the case of local hard drive it is not working. The image seems to be corrupted. Here is how I am saving it.
StorageManager.writeImageFile = function(file, data, callback){
if(!UserManager.isLoggedIn()){
UserManager.login();
return;
}
var key = ProjectManager.projectName;
var dir = Settings.USER_FOLDER + "/" + key + "/" + "media";
data = window.encode64(file.contents);
fs.writeFile(dir + "/" + file.name, data, "base64", function(err){});
callback();
};
I have tried several approaches but it seems to be not working correctly. The image file is written in the hard drive but it is corrupted. Please help me to resolve this problem.

Answer 1

I believe this will solve your problem:
var imgData = canvas.toDataURL('image/png');
var data = imgData.replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
var whereToSave = "C:\pathToSave"; // edit this
fs.writeFile(whereToSave, buf);