Node.js教程：Node.js和 HTML5-Canvas 结合实现截图上传交互-职坐标

Node.js教程：Node.js和 HTML5-Canvas 结合实现截图上传交互

沉沙 2018-05-15 来源：阅读 2109 评论 0

摘要：本篇Node.js教程讲解了Node.js和 HTML5-Canvas 结合实现截图上传交互的方法，希望本篇Node.js教程对大家学习Node.js有所帮助。

主页代码： Index.js

 var server = require("./server");
 var route  = require("./route");
 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 代码：

 function route(pathname,response,postData){ 
     var requestHandler=require("./requestHandler"); 
     if (typeof requestHandler.handle[pathname] === 'function') { 
           
              requestHandler.handle[pathname](response,postData); 
          response.end(); 7      }  
     else { 
         console.log("No request handler found for " +pathname);
      response.writeHead(404, {"Content-Type": "text/plain"});
         response.write("404 Not found");
          
       }
 }
 exports.route=route;

requestHandler.js　代码：

 function start(response,postData) { 
   console.log("Request handler 'start' was called."); 
      
     response.writeHead(200, {"Content-Type": "text/html"}); 
     var body = '<html>'+ 
     '<head>'+ 
     '<meta http-equiv="Content-Type" content="text/html; '+ 
     'charset=UTF-8" />'+ 
     '</head>'+
     '<body>'+
     '<canvas id="mycanvas" width=500 height=500 border=3 solid=#9C9898></canvas>'+'<script src="//common.cnblogs.com/script/jquery.js" type="text/javascript"></script>'+'</body>'
     +'<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>'+
     
     '</html>';
        response.write(body);
     response.end();
 }
 
 function upload(response,postData) {
     response.writeHead(200, {"Content-Type": "text/plain"});
     var fs = require('fs');
     var base64Data = postData.replace(/^data:image\/\w+;base64,/, "");
     var dataBuffer = new Buffer(base64Data, 'base64');
       console.log("Request handler 'upload' was called.");
     fs.writeFile("out.png", dataBuffer, function(err) {
         });
      response.write("hello");
     response.end();
 }
 var handle=[];
 handle['/start']=start;
 handle['/upload']=upload;
 handle['/']=start;
 exports.handle=handle;

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

程序运行结果：

浏览器：

Node.js教程：Node.js和 HTML5-Canvas 结合实现截图上传交互