将图片转化为矢量并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_text
24 app.get('/create', create);25
26 //des:获取目录下指定json文件的json对象
27 //@dirName:
28 //@fileName:
29 //url: domain/get?dirName=json&fileName=polygon_text
30 app.get('/get', get);31
32 //des:将点数据转化成可用坐标数据
33 //@fileNames:当isMany传入参数为1的时候,fileNames=file1@file2@file2的形式;否则只为fileNames=fileName
34 //[@isMany]:当需要处理多文件的时候传入
35 //url:domain/compile?fileNames=xxx[&isMany=1]
36 app.get('/compile', compile);37
38 //des:列出目录下面的文件
39 //@dirName:目录名称
40 //url:domain/dir?dirName=xxx
41 app.get('/dir', dir);42
43 //des:数据合并
44 //@fileNames:多文件,以@分割,例如fileNames=file1@file2@file2
45 app.get('/contact', contact);46
47 //des:数据压缩
48 //@fileName需要压缩的文件名
49 //url:domain/dist?fileName=xxx
50 app.get('/dist', dist);51
52 };
(1)获取某个文件夹下的某个文件:
1 /*
2 * 描述:读取json文件的json对象, 这里因为实时读取建议不使用require加载3 * 时间:2015-04-144 **/
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 returnres.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 returnres.json(reObj);33 }else{34 returnres.json(errStatus);35 }36 });37 };
(2)创建点位数据
1 /*
2 * 描述:向文件中追加坐标3 * 时间:2015-04-144 **/
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 * 描述:将数据转化为可用的json3 * 时间:2015-04-144 **/
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 returnobj;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 returnres.json(obj);38 else
39 return res.json({status: 0});40 });41 });42 }else{//多文件处理
43 var names = fileNames.split('@');44 try{45 for(var i innames){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-144 **/
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 returnres.json({13 status: 1,14 files: files15 });16 }17 return res.json({status: 0});18
19 });20 };
(5)多个json文件合并
1 /*
2 * 描述:数据合并3 * 时间:2015-04-144 **/
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 innames){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 returnres.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 && compare
16 //第一层
17 var result ={};18 for(var i inarr){19 var obj =arr[i];20 //第二层
21 for(var n inobj){22 var dataXYs =obj[n];23 result[n] =[];24 //第三层
25 for(var k indataXYs){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 var newFileName = 'dist_';34 if(files.length){35 var n =files.length;36 newFileName += (parseInt(n) + 1) + '.json';37 }else{38 newFileName += '1.json';39 }40 fs.writeFile('./dist/' + newFileName, JSON.stringify(result), function(err){41 if(!err){42 var sizeOld =fs.statSync(path).size;43 var sizeNew = fs.statSync('./dist/' +newFileName).size;44 var reObj ={45 status: 1,46 //压缩率计算
47 rate: (sizeOld - sizeNew)/sizeOld,
48 //新文件名
49 filename: newFileName,50 //压缩结果
51 data: result52 }53 returnres.json(reObj);54 }55 returnres.json(errStatus);56 });57 }else{58 returnres.json(errStatus);59 }60 });61
62
63 }
五、canvas绘制
(1)封装了个简单的ajax工具类
1 /*
2 * 描述:提供基本的AJAX、JSON、事件绑定3 * 时间:2015-04-144 **/
5 ;(function(exports){6
7 //JSON
8 functionjsonParse(data){9 if(JSON){10 returnJSON.parse(data);11 }else{12 return (new Function('return' +data))();13 }14 }15
16 //AJAX
17 functionajax(options, callback){18 var method = options.method || 'GET';19 var url = options.url || '';20 var xmlHttp = null;21
22 if(window.XMLHttpRequest){23 xmlHttp = newXMLHttpRequest();24 }25
26 if(window.ActiveXObject){27 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");28 }29
30 xmlHttp.open(method, url, true);31 xmlHttp.onreadystatechange = function(){32 if(xmlHttp.readyState === 4 && xmlHttp.status === 200){33 callback(jsonParse(xmlHttp.responseText));34 }35 }36 xmlHttp.send();37 }38
39 //事件绑定
40 functionaddEvent(el, type, callback){41 if(!el){42 return;43 }44 if(el.addEventListener){45 el.addEventListener(type, callback);46 }else{47 el.attachEvent('on' +type, callback);48 }49 returncallback;50 }51
52 //Tip
53 var ID_STRING = '_____wlh_tip___0088';54 functiontipShow(){55 var body = document.getElementsByTagName('body')[0];56 if(document.getElementById(ID_STRING)){57 document.getElementById(ID_STRING).style.display = 'block';58 body.style.overflow = 'hidden';59 return;60 }61 var el = document.createElement('div');62 el.style.zIndex = 1000;63 el.style.width = '300px';64 el.style.height = '150px';65 el.style.backgroundColor = '#FFF';66 el.style.position = 'fixed';67 el.style.left = '30%';68 el.style.top = '40%';69 el.style.opacity = 0.9;70 el.style.color = '#00B7FF';71 el.style.lineHeight = '150px';72 el.style.fontSize = '16px';73 el.style.paddingLeft = '20px';74 el.style.borderRadius = '3px';75 el.innerHTML = '数据正在处理, 请等待......';76 el.id =ID_STRING;77
78 body.style.overflow = 'hidden';79 body.appendChild(el);80 return;81 }82
83 functiontipHide(){84 var body = document.getElementsByTagName('body')[0];85 if(document.getElementById(ID_STRING)){86 document.getElementById(ID_STRING).style.display = 'none';87 body.style.overflow = 'auto';88 }89 }90
91 exports.ajax =ajax;92 exports.addEvent =addEvent;93 exports.tipShow =tipShow;94 exports.tipHide =tipHide;95
96 })(window);
View Code
(2)canvas图层叠加绘制
1 ;(function(exports, require){2 var canvas = document.getElementsByTagName('canvas')[0];3 var context = canvas.getContext('2d');4 var ajax =require.ajax;5 var addEvent =require.addEvent;6
7 //缩放比例
8 var SCALE_BIG = 1;9 var SCALE_SML = 0.25;10
11 //颜色对应表
12 var COLOR_LIST ={13 BODY: '#63CEF6',14 DUPI: '#FFF',15 EYE: '#034E68',16 ZUIBA: '#0089B5',17 TOUQUAN: '#BDF9FB',18 JIUWO: '#FFBFE3',19 QIPAO: '#C9E8FB',20 BISHANG: '#46BEEF',21 BIXIA: '#54C5F2',22 GO: '#B1DBF2'
23 };24
25 if(!context){26 return;27 }28
29 context.scale(SCALE_SML, SCALE_SML);30
31 //simple package design pattern
32 functionaddDrawFunc(data, part, color, fun){33 var xys =data[part];34 context.beginPath();35 context.strokeStyle =color;36 context.lineWidth = 1;37 context.fillStyle =color;38 fun(xys);39 context.stroke();40 context.fill();41 context.closePath();42 }43 //draw polygon
44 functiondrawPolygon(data, part, color){45 addDrawFunc(data, part, color, function(xys){46 context.moveTo(xys[0], xys[1]);47 for(var i = 2; i < xys.length; i++){48 if(i % 2 !== 0){49 context.lineTo(xys[i-1], xys[i]);50 }51 }52 });53 }54
55 //draw eye
56 functiondrawEye(data, part, color){57 addDrawFunc(data, part, color, function(xys){58 //变形
59 context.save();60 context.scale(1.5, 2);61 context.arc(xys[0]/1.5, xys[1]/2, 6, 0, Math.PI * 2, false);62 context.restore();63 });64 }65
66 //drawCircle
67 functiondrawCircle(data, part, color, radius){68 addDrawFunc(data, part, color, function(xys){69 context.arc(xys[0], xys[1], radius, 0, Math.PI * 2, false);70 });71 }72
73
74
75 //draw line
76 functiondrawLine(data, part, color, width){77 var xys =data[part];78 context.beginPath();79 context.strokeStyle =color;80 context.lineWidth =width;81 context.moveTo(xys[0], xys[1]);82 for(var i = 0; i < xys.length; i++){83 if(i % 2 !== 0){84 context.lineTo(xys[i-1], xys[i]);85 }86 }87 context.stroke();88 context.closePath();89 }90
91 //draw text
92 functiondrawText(x, y){93 context.beginPath();94 context.fillStyle = '#FFFFFF';95 context.font = '40px arial,sans-serif';96 context.fillText('go...', x, y)97 context.fill();98 context.closePath();99 }100
101
102 //绘制
103 functiondraw(fileName){104 var url = 'http://127.0.0.1:3000/get?dirName=dist&fileName=' +fileName;105 ajax({method: 'GET', url: url}, function(data){106 data =data.data;107 drawPolygon(data, 'polygon_body', COLOR_LIST.BODY);108 drawPolygon(data, 'polygon_dupi', COLOR_LIST.DUPI);109 drawPolygon(data, 'polygon_touquan', COLOR_LIST.TOUQUAN);110 drawPolygon(data, 'polygon_jiuwo1', COLOR_LIST.JIUWO);111 drawPolygon(data, 'polygon_jiuwo2', COLOR_LIST.JIUWO);112 drawPolygon(data, 'polygon_go', COLOR_LIST.GO);113
114 drawEye(data, 'circle_eye1', COLOR_LIST.EYE);115 drawEye(data, 'circle_eye2', COLOR_LIST.EYE);116
117 drawLine(data, 'line_zui', COLOR_LIST.ZUIBA, 4);118 drawLine(data, 'line_bishang', COLOR_LIST.BISHANG, 8);119 drawLine(data, 'line_bixia', COLOR_LIST.BIXIA, 5);120
121 drawCircle(data, 'circle_qipao1', COLOR_LIST.QIPAO, 30);122 drawCircle(data, 'circle_qipao2', COLOR_LIST.QIPAO, 25);123 drawCircle(data, 'circle_qipao3', COLOR_LIST.QIPAO, 15);124 drawCircle(data, 'circle_qipao4', COLOR_LIST.QIPAO, 20);125 drawCircle(data, 'circle_qipao5', COLOR_LIST.QIPAO, 15);126 drawCircle(data, 'circle_qipao6', COLOR_LIST.QIPAO, 10);127 drawCircle(data, 'circle_qipao7', COLOR_LIST.QIPAO, 16);128
129 drawText(320, 69);130 });131 }132
133 draw('dist_3');134
135
136 })(window, window);
六、代码 & 实例