Question

我正在尝试做一个小应用程序，让用户使用他们的网络摄像头拍照并将该图片发送到服务器，以便将其存储为.png文件。现在几乎所有东西都工作正常，您可以使用相机拍摄照片，然后发送表格，然后创建.png文件，但它似乎无效，而不是图像。我在这段代码中遗漏了什么吗？

提前致谢。

这是前端代码：

window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
    console.log(error.code); 
};

// Put video listeners into place
if(navigator.getUserMedia) {
    navigator.getUserMedia(videoObj, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) {
    navigator.webkitGetUserMedia(videoObj, function(stream){
           video.src = window.webkitURL.createObjectURL(stream);
           video.play();
    }, errBack);
}
else if(navigator.mozGetUserMedia) {
    navigator.mozGetUserMedia(videoObj, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}
// Trigger photo snap
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
    var dataURL = canvas.toDataURL('image/png').replace(/^data:image\/png;base64,/,'');
    var imginput = document.getElementById('imgdata');
    imginput.value = dataURL;
});
}, false);

这是node.js服务器上的代码：

// Load modules / dependencies
var http = require('http');
var fs = require('fs');
var qs = require('querystring');
var config = JSON.parse(fs.readFileSync('config.json'));
var port = config.port;

var server = http.createServer(function(request, response) {
console.log('Received request: ' + request.url);
fs.readFile('./' + request.url, function(error, data) {
    if (error) {
        response.writeHead(404, {'Content-type':'text/plain'});
        response.end('Sorry the page was not found');
    } else if (request.method == 'POST') {
        processPost(request, response, function() {
            console.log(response.post);
            response.writeHead(200, "OK", {'Content-Type': 'text/plain'});
            response.end();
        });
    } else {
        response.writeHead(200, {'Content-type':'text/html'});
        response.end(data);
    };
})
});

function processPost(request, response, callback) {
var queryData = "";
if(typeof callback !== 'function') return null;

if(request.method == 'POST') {
    request.on('data', function(data) {
        queryData += data;
        fs.writeFile('image.png', queryData, 'base64');
    });

    request.on('end', function() {
        callback();
    });

} else {
    response.writeHead(405, {'Content-Type': 'text/plain'});
    response.end();
}
}

    server.listen(port, function() {
    console.log('Listening ' + port);
});

Answer 1

我终于使用express并将服务器代码更改为以下内容：

var fs = require("fs");
var express = require("express");

var app = express();

app.use(express.static(__dirname + '/'));
app.use(express.bodyParser());

app.get('*', function(req, res) {
    res.sendfile('./index.html');
});

app.post('/', function(req, res) {
  var imgdata = req.body.userimg;
  fs.writeFile('image.png', imgdata, 'base64');
  res.sendfile('./index.html');
});

app.get("*", function(request, response){
    response.send("Page not found", 404);
});

app.listen(8080);
console.log("App listening on port 8080");

现在将从网络摄像头捕获的图像保存为有效的.png文件。

使用node.js通过canvas dataURL从网络摄像头保存.png图像时无效的文件

1 个答案: