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

由于本人是网站前端，想学习一门后台语言来提升下自己，最后选择了node.js ，并看了node入门，nodebeginner 一书后，决定动手自己写个小工能来巩固下学到的node.js 知识 ，于是就有了这篇文章。

本文大多数代码是从node入门一书中修改的，请体谅下菜鸟的能力有限，如有更完善的解决方案也欢迎留言教导本人，不胜感激。

首先，我们需要建一个html 页面，用于与后台间的数据传递，这里主要是图片名称及 canvas 里的imgdata 。保存为：index.html

canvas to img

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

})()

第二步，创建 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，例如保存于文件夹中等等。。。

谢谢！