初学nodejs,利用 html5 canvas +nodejs 将canvas 保存为图片
发布于 9 年前 作者 jaicc 22591 次浏览 最后一次编辑是 5 年前

由于本人是网站前端,想学习一门后台语言来提升下自己,最后选择了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

还有好多在改善中的,例如UI,例如保存于文件夹中等等。。。 谢谢!

6 回复

挺好哒,继续加油,还可以研究下后端的node-cnavas

嗯,node-canvas 不错的。。不过可能是职业病,就是希望前端后端结合下。谢谢你评论

Buffer的作用是不是把获取到的数据转换成base64,然后 fs.writeFile(imgname+".png", dataBuffer, function(err) { 不用再指定编码就是UTF8类型的,

能直接写入吗?不要buffer

支持这个帖子。

@jaicc 你提到的node入门一书 全称是什么?可有下载的地方?

html布局怎么生成图片??在node的时候!

回到顶部