初学nodejs，利用 html5 canvas +nodejs 将canvas 保存为图片

由于本人是网站前端，想学习一门后台语言来提升下自己，最后选择了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 即可，界面有点恶心，不过只是为了学习，实现功能，见谅 enter image description here