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 结合实现截图上传交互的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 做梦梦到猪了是什么意思
- 下一篇: 有关MSHTML