Chinaunix首页 | 论坛 | 博客
  • 博客访问: 7202436
  • 博文数量: 510
  • 博客积分: 12019
  • 博客等级: 上将
  • 技术积分: 6836
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-01 16:46
文章分类

全部博文(510)

文章存档

2022年(2)

2021年(6)

2020年(59)

2019年(4)

2018年(10)

2017年(5)

2016年(2)

2015年(4)

2014年(4)

2013年(16)

2012年(47)

2011年(65)

2010年(46)

2009年(34)

2008年(52)

2007年(52)

2006年(80)

2005年(22)

分类: Python/Ruby

2012-11-23 11:52:20

原文于
基于html5 canvas

1、ubuntu 下安装
sudo apt-get install libcairo2-dev
sudo npm install canvas
2、nodejs代码

点击(此处)折叠或打开

  1. var Canvas = require('./Common/canvas');
  2. var getRandom = function(start,end){
  3.     return start+Math.random()*(end-start);
  4. };
  5. var canvas = new Canvas(50,20);
  6. var ctx = canvas.getContext('2d');
  7. var s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  8. var code = '';
  9. for(var i=0;i<4;i++){
  10.     code+= s.substr(parseInt(Math.random()*36),1);
  11. }
  12. var font= 'bold {FONTSIZE}px Impact';//"Bold Italic {FONTSIZE}px arial,sans-serif";//"13px sans-serif";
  13. var start = 3;
  14. var colors = ["rgb(255,165,0)","rgb(16,78,139)","rgb(0,139,0)","rgb(255,0,0)"];
  15. var trans = {c:[-0.108,0.108],b:[-0.05,0.05]};
  16. var fontsizes = [11,12,13,14,15,16];
  17. for(var i in code){
  18.     ctx.font = font.replace('{FONTSIZE}',fontsizes[Math.round(Math.random()*10)%6]);
  19.     ctx.fillStyle = colors[Math.round(Math.random()*10)%4];//"rgba(0, 0, 200, 0.5)";
  20.     ctx.fillText(code[i], start, 15,50);
  21.     ctx.fillRect();
  22.     //con.translate(start,15);
  23.     //ctx.transform(a,b, c, d, e, f);
  24.     //参考:
  25.     //a:水平缩放,default:1 ,取值:0.89,1.32,-0.56等,
  26.     //b:y轴斜切,default:0 ,取值:-0.89,1.32等,
  27.     //c:x轴斜切,default:0 ,取值:-0.89,1.32等,
  28.     //d:垂直缩放,default:1 ,取值:-0.89,0.88,1.32等,
  29.     //e:平移,default:0 ,取值:-53,52等,
  30.     //f:纵称,default:0 ,取值:-53,52等,
  31.     var c = getRandom(trans['c'][0],trans['c'][1]);
  32.     var b = getRandom(trans['b'][0],trans['b'][1]);
  33.     //alert(c+','+b);
  34.     //ctx.transform(1,b, c, 1, 0, 0);
  35.     start+=11;
  36. }
  37. //参考下面链接;可发送给客户端
  38. console.log('code:'+code);
  39. console.log('+canvas.toDataURL()+'" alt="" />');

  40. //输出文件到out.png.可方便使用
  41. var buf = canvas.toDataURL();
  42. var base64Data = buf.replace(/^data:image\/\w+;base64,/, "");
  43. var dataBuffer = new Buffer(base64Data, 'base64');

  44. var fs = require("fs");
  45. fs.writeFile("out.png", dataBuffer, function(err) {
  46.              if(err){
  47.                console.log("errro!");
  48.              }else{
  49.                console.log("保存成功!");
  50.              }
  51.            });
参考连接:
         
          http://blog.csdn.net/northwind_x/article/details/5874680
         


阅读(7825) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~