从 node-webkit 中的网络摄像头捕获后写入 png 不起作用

Question

我正在使用以下代码在 html5 中拍摄快照。

    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);
    }
};

图像会上传到云端或保存在本地存储中（使用 nodejs 函数），具体取决于在线或死网。它可以很好地将图像数据上传到云端，我可以保存并查看图像。但在本地硬盘驱动器的情况下，它不起作用。图像似乎已损坏。这是我保存它的方法。

    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();
};

我尝试了几种方法，但似乎无法正常工作。图像文件已写入硬盘驱动器，但已损坏。请帮我解决这个问题。

Answer 1

我相信这会解决你的问题：

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