将图片转化为矢量并canvas化的简单工具(基于Node.js + HTML5 canvas)

一、前言

最近需要做一个图标的矢量化，但是没有数据，因此采用了node.js作为数据处理工具，canvas绘制图标；结果发现使用canvas绘制的图标比之前少了近10几k（原20K+, 现包含代码10k-）;所以结果还是比较近人意的。代码已经放在github了，具体戳这：https://github.com/vczero/image-vector欢迎大家改进，这只是个so simple tool...

二、设计

（1）做一个基本的矢量数据处理工具，方便后期数据生产较为自动化；

（2）选用node.js作为批量数据处理的脚本工具，暴露服务接口，前端调用；canvas按照图层要素渲染；

三、产出

（1）canvas绘制携程的图标(不是图片，是json数据),如下。可以访问：http://vczero.github.io/ctrip/index.html；

（2）简单的矢量化处理工具，如下图：

四、node.js服务端

node.js主要作为数据处理服务存在，具体的代码很简单，如下：

（0）服务接口如下：

 1 /* 2  * 路由服务列表模块  3  *  4  * */ 5 var routes = require('./index'); 6 var create = require('./create'); 7 var get = require('./get'); 8 var compile = require('./compile'); 9 var dir = require('./dir');10 var contact = require('./contact');11 var dist = require('./dist');12 13 14 module.exports = function(app){15     16     //index,  服务列表17     app.use('/', routes);18     19     //des:创建点文件20     //@x:横坐标21     //@y:纵坐标22     //@fileName:需要保存的文件名23     //url: domain/create?x=112&y=678&fileName=polygon_text24     app.get('/create', create);25     26     //des:获取目录下指定json文件的json对象27     //@dirName:28     //@fileName:29     //url: domain/get?dirName=json&fileName=polygon_text30     app.get('/get', get);31     32     //des:将点数据转化成可用坐标数据33     //@fileNames:当isMany传入参数为1的时候，fileNames＝file1@file2@file2的形式;否则只为fileNames=fileName34     //[@isMany]:当需要处理多文件的时候传入35     //url:domain/compile?fileNames=xxx[&isMany=1]36     app.get('/compile', compile);37     38     //des:列出目录下面的文件39     //@dirName:目录名称40     //url:domain/dir?dirName=xxx41     app.get('/dir', dir);42     43     //des:数据合并44     //@fileNames:多文件，以@分割，例如fileNames＝file1@file2@file245     app.get('/contact', contact);46     47     //des:数据压缩48     //@fileName需要压缩的文件名49     //url:domain/dist?fileName=xxx50     app.get('/dist', dist);51     52 };

（1）获取某个文件夹下的某个文件：

 1 /* 2  * 描述：读取json文件的json对象, 这里因为实时读取建议不使用require加载 3  * 时间：2015-04-14 4  * */ 5  6 var fs = require('fs'); 7  8 module.exports = function(req, res){ 9     var dirName = req.param('dirName');10     var fileName = req.param('fileName');11     var errStatus = {status: 0};12     13     if(!dirName || !fileName){14         return res.json(err);15     }16     17     var path = './' + dirName + '/' + fileName + '.json';18      19     fs.readFile(path, function(err, data){20         try{21             var reObj = null;22             var obj = JSON.parse(data.toString());23             reObj = {24                 status: 1,25                 data: obj26             }27         }catch(e){28             reObj = null;29         }30     31         if(!err && obj){32             return res.json(reObj);33         }else{34             return res.json(errStatus);35         }36     });    37 };

（2）创建点位数据

 1 /* 2  * 描述：向文件中追加坐标 3  * 时间：2015-04-14 4  * */ 5 var fs = require('fs'); 6  7 module.exports = function(req, res){ 8     var x = req.param('x'); 9     var y = req.param('y');10     var fileName = req.param('fileName');11     var str = x + '/t' + y + '/r/n';12     13     fs.appendFile('./data/' + fileName, str, function(err){14         var obj = {15             x: x,16             y: y17         }18         if(!err){19             obj.status = 1;20             res.json(obj);21         }else{22             obj.status = 0;23             res.send(obj);24         }25         console.log('saved: ', x + ' , ' + y);26     });27     28     29 }

（3）将数据转化为可用的json格式数据

 1 /* 2  * 描述：将数据转化为可用的json 3  * 时间：2015-04-14 4  * */ 5  6 var fs = require('fs'); 7 var parseData = function(data){ 8     var strs = (data.toString()).split('/r/n'); 9     var data = [];10     for(var i = 0; i < strs.length; i++){11         var xys = strs[i].split('/t');12         var xy = {13             x: xys[0],14             y: xys[1]15         };16         if((i + 1) !== strs.length)17             data.push(xy);18     }19     var obj = data;20     return obj;21 };22 23 module.exports = function(req, res){24     var fileNames = req.param('fileNames');25     var isMany = req.param('isMany');26     var pathData = '';27     var pathJSON = '';28     29     //单文件处理30     if(!isMany){31         pathData = './data/' + fileNames;32         pathJSON = './json/' + fileNames + '.json';33         fs.readFile(pathData, function(err, data){34             var obj = parseData(data);35             fs.writeFile(pathJSON, JSON.stringify(obj), function(err){36                 if(!err)37                     return res.json(obj);38                 else39                      return res.json({status: 0});40             });    41         });    42     }else{//多文件处理43         var names = fileNames.split('@');44         try{45             for(var i in names){46                 var path_Data = './data/' +  names[i];47                 var path_JSON = './json/' + names[i] + '.json';48                 var content = fs.readFileSync(path_Data);49 50                 fs.writeFileSync(path_JSON, JSON.stringify(parseData(content)));51             }52             res.json({status: 1});53         }catch(e){54             res.json({status: 0});    55         }56     }57 }

（4）列目录

 1 /* 2  * 描述：列目录 3  * 时间：2015-04-14 4  * */ 5  6 var fs = require('fs'); 7  8 module.exports = function(req, res){ 9     var dirName = req.param('dirName');10     fs.readdir('./' + dirName, function(err, files){11         if(!err){12             return res.json({13                 status: 1,14                 files: files15             });16         }17         return res.json({status: 0});18         19     });20 };

（5）多个json文件合并

 1 /* 2  * 描述：数据合并 3  * 时间：2015-04-14 4  * */ 5  6 var fs = require('fs'); 7 module.exports = function(req, res){ 8     var fileNames = req.param('fileNames'); 9     var pathContact = './contact/';10     var names = fileNames.split('@');11     12     try{13         var content = [];14         for(var i in names){15             var pathData = './json/' + names[i];16             var data = fs.readFileSync(pathData);17             var name = names[i].split('.')[0];18             var obj = {};19             obj[name] = JSON.parse(data.toString());20             content.push(obj);21             22         }23         var files = fs.readdirSync(pathContact);24         var newName = 'contact_';25         if(files.length){26             var n = files.length;27             newName += (parseInt(n) + 1) + '.json';28         }else{29             newName += '1.json'; 30         }31         var str = JSON.stringify(content);32         fs.writeFile(pathContact + newName, str, function(err){33             if(!err)34                 res.json({status: 1});    35         });36     }catch(e){37         res.json({status: 0});    38     }39     40 }

（6）去除冗余的数据

 1 var fs = require('fs'); 2  3 module.exports = function(req, res){ 4     var fileName = req.param('fileName'); 5     var errStatus = {status: 0}; 6      7     if(!fileName){ 8         return res.json(errStatus);     9     }10     11     var path = './contact/' + fileName + '.json';12     fs.readFile(path, function(err, data){13         if(!err){14             var arr = JSON.parse(data.toString());15             //TODO:Format && compare16             //第一层17             var result = {};18             for(var i in arr){19                 var obj = arr[i];20                 //第二层21                 for(var n in obj){22                     var dataXYs = obj[n];23                     result[n] = [];24                     //第三层25                     for(var k in dataXYs){26                         result[n].push(dataXYs[k].x);27                         result[n].push(dataXYs[k].y);28                     }29                 }30             }31             //写入到压缩文件夹32             var files = fs.readdirSync('./dist/');33