node.js 和 HTML5-Canvas 结合实现截图上传交互

楼主要做一个简单的图片上传服务器， node.js实现服务端，页面使用HTML5-Canvas实现截图。

为什么用Nodejs呢，因为用Js写后台很爽-。- 而且比较简单

为什么用canvas呢，其实我不想用的因为有些低版本的IE对HTML5的支持不好，

楼主本来想用 HTML2CANVAS 来实现截图并且上传到一个服务器上。（html2canvas 技术可以参照我另一篇博客【戳这里】）

但是这个技术对于一些复杂的DOM就不适用了，比如EXTJS drawComponent画出来的东西完全是渣啊~~所以退而求其次，我把呈现测试用

HTML5的Canvas呈现出来，然后保存图片。

╮(╯▽╰)╭ 具体用处是公司的秘密

推荐一个教程，写的很简单明了:

Node入门

下面的代码是我参照了这个教程的结构写的，如有雷同说明那货一定也是看了这个教程。

主页代码： Index.js

1 var server = require("./server");
2 var route  = require("./route");
3 server.start(route.route);

server代码：

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;console.log("Request for " + pathname + " received.");request.setEncoding("utf8");request.addListener("data", function(postDataChunk) {postData += postDataChunk;console.log("Received POST data chunk '"+postDataChunk + "'.");});request.addListener("end", function() {route(pathname, response, postData);});}http.createServer(onRequest).listen(8888);console.log("Server has started.");
}exports.start = start;

route.js 代码：

 1 function route(pathname,response,postData){
 2     var requestHandler=require("./requestHandler");
 3     if (typeof requestHandler.handle[pathname] === 'function') {
 4
 5              requestHandler.handle[pathname](response,postData);
 6          response.end();
 7      }
 8     else {
 9         console.log("No request handler found for " +pathname);
10      response.writeHead(404, {"Content-Type": "text/plain"});
11         response.write("404 Not found");
12
13       }
14 }
15 exports.route=route;

requestHandler.js　代码：

 1 function start(response,postData) {
 2   console.log("Request handler 'start' was called.");
 3
 4     response.writeHead(200, {"Content-Type": "text/html"});
 5     var body = '<html>'+
 6     '<head>'+
 7     '<meta http-equiv="Content-Type" content="text/html; '+
 8     'charset=UTF-8" />'+
 9     '</head>'+
10     '<body>'+
11     '<canvas id="mycanvas" width=500 height=500 border=3 solid=#9C9898></canvas>'+'<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>'+'</body>'
12     +'<script type="text/javascript">window.onload = function(){var canvas=document.getElementById("mycanvas");var context = canvas.getContext("2d");context.beginPath();context.moveTo(100, 150);context.lineTo(450, 50);context.lineWidth = 10;context.strokeStyle ="#ff0000";context.stroke();$.ajax({url: "/upload",data:canvas.toDataURL("image/png"),type: "post",success: function( result ) {console.log( result );}});};</script>'+
13
14     '</html>';
15        response.write(body);
16     response.end();
17 }
18
19 function upload(response,postData) {
20     response.writeHead(200, {"Content-Type": "text/plain"});
21     var fs = require('fs');
22     var base64Data = postData.replace(/^data:image\/\w+;base64,/, "");
23     var dataBuffer = new Buffer(base64Data, 'base64');
24       console.log("Request handler 'upload' was called.");
25     fs.writeFile("out.png", dataBuffer, function(err) {
26         });
27      response.write("hello");
28     response.end();
29 }
30 var handle=[];
31 handle['/start']=start;
32 handle['/upload']=upload;
33 handle['/']=start;
34 exports.handle=handle;

其中，处理base64的图片数据用到了这个链接的技术：处理base64数据

程序运行结果：

浏览器：

服务器目录：

转载于:https://www.cnblogs.com/xdxer/archive/2013/01/18/nodejs_canvas_upload.html

node.js 和 HTML5-Canvas 结合实现截图上传交互相关推荐

html坐标截取图片,JavaScript+html5 canvas实现本地截图教程
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传&l ...
JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
头像截图上传两种方式（SWFUpload、一个简单易用的flash插件）
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input ty ...
wangEditor在IE中截图上传问题（一）
最近使用wangEditor富文本在IE中截图上传问题遇到了瓶颈,当时选用wangEditor富文本编辑器时,并没有想到上传图片时,浏览器兼容的问题,目前从wangEditor版本1到3,从2开始说支 ...
[js]uploadify结合jqueryUI弹出框上传，js中的冒出的bug，又被ie坑了
引言最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
html5 如何实现客户端验证上传文件的大小
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...
puppeteer执行js_使用Node.js和Puppeteer与表单和网页进行交互– 2
puppeteer执行js Hi guys! Today let's look at another powerful function of the puppeteer API using Node ...

node.js 和 HTML5-Canvas 结合实现截图上传交互

node.js 和 HTML5-Canvas 结合实现截图上传交互相关推荐

最新文章

热门文章