由于本人是网站前端，想学习一门后台语言来提升下自己，最后选择了node.js ，并看了node入门，nodebeginner 一书后，决定动手自己写个小工能来巩固下学到的node.js 知识 ，于是就有了这篇文章。 本文大多数代码是从node入门一书中修改的，请体谅下菜鸟的能力有限，如有更完善的解决方案也欢迎留言教导本人，不胜感激。 首先，我们需要建一个html 页面，用于与后台间的数据传递，这里主要是图片名称及 canvas 里的imgdata 。保存为：index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas to img</title>
</head>
<body>
<form method="post" action="/upload">
<input type="text" name="imgname" id="imgname" />
<input type="hidden" name="imgdata" id="imgdata" />
<input type="submit" value="save" />
</form>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
(function(){
var canvas=document.getElementById("canvas");
var imgname=document.getElementById("imgname");
var imgdata=document.getElementById("imgdata");
var ctx=canvas.getContext('2d');
ctx.fillStyle="#ff0000";
ctx.fillRect(0,0,80,100);
imgdata.value=canvas.toDataURL();
})()
</script>
</body>
</html>
第二步，创建 server.js ,作为服务器，代码如下：
var http = require("http");
var url = require("url");
function start(route, handle) {
function onRequest(request, response) {
var postData = "";
var pathname = url.parse(request.url).pathname;
request.setEncoding("utf8");
request.addListener("data", function(postDataChunk) {
postData += postDataChunk;
});
request.addListener("end", function() {
route(handle, pathname, response, postData);
});
}
http.createServer(onRequest).listen(8888);
}
exports.start = start;
第三步，创建 router.js 作为路由功能，代码如下
function route(handle, pathname, response, postData) {
if (typeof handle[pathname] === 'function') {
handle[pathname](response, postData);
} else {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not found");
response.end();
}
}
exports.route = route;
第四步，创建 requestHandlers.js, 来作为请求处理，代码如下：
var querystring = require("querystring");
var fs=require("fs");
function start(response, postData) {
response.writeHead(200, {"Content-Type": "text/html"});
response.end(fs.readFileSync(__dirname + '/index.html'));
}
function upload(response, postData) {
response.writeHead(200, {"Content-Type": "text/plain"});
var imgdata=querystring.parse(postData).imgdata;
var imgname=querystring.parse(postData).imgname;
var base64Data = imgdata.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = new Buffer(base64Data, 'base64');
fs.writeFile(imgname+".png", dataBuffer, function(err) {
if(err){
response.write(err);
}else{
response.write("保存成功！");
}
});
response.end();
}
exports.start = start;
exports.upload = upload;
第五步，创建 index.js 来作为web 的启动，代码如下：
var server=require("./server");
var router=require("./route");
var requestHandlers=require("./requestHandlers");
var handle=[];
handle["/"]=requestHandlers.start;
handle["/start"]=requestHandlers.start;
handle["/upload"]=requestHandlers.upload;
handle["/show"]=requestHandlers.show;
server.start(router.route,handle);
最后，node index.js 即可，界面有点恶心，不过只是为了学习，实现功能，见谅
还有好多在改善中的，例如UI，例如保存于文件夹中等等。。。 谢谢！
