nodejs生成验证码

2017-11-28

前言

大家都知道原来php有个GD库可以做图片验证码，那么nodejs如何做验证码？带着这个疑问我在google上展开了各种搜索。
终于找到了node-canvas这个node图形包。其原理就是nodejs通过这个包实现了nodejs版本的 canvas 语法，通过调用底层的c语言包来绘制canvas并生成图片。这里只说如何使用，原理不再纠结。

如何安装

安装前请先安装node-canvas依赖的底层包。

  • Mac HomeBrew 安装
1
brew install pkg-config cairo pango libpng jpeg giflib
  • lunix安装
1
sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
  • Windows安装

这里windows安装笔记繁琐，所有直接去github查看wiki

以上底层依赖安装好后执行

1
npm install canvas

目前npm下载的是1版本，最新版本请执行

1
npm install canvas@next

nodejs生成验证码demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const express = require('express'); //express
const app = express();
const consolidate = require('consolidate');
app.set('view engine', 'html');
app.set('views', './views');
app.engine('html', consolidate.ejs);
const Canvas = require('canvas');// node-canvas
const Image = Canvas.Image
function mackimage(){
	var canvas = new Canvas(80,40)
    var ctx = canvas.getContext('2d');
	ctx.font = '20px Impact';
	var text=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','L','Y','Z','0','1','2','3','4','5','6','7','8','9'];
	var randomarr=[];
	for(var i=0;i<4;i++){
		var random = Math.ceil(Math.random()*35);
	    randomarr.push(text[random]);
	}
	ctx.fillText(randomarr.join(''), 10, 30);//canvas 加入随机4位数
	var te = ctx.measureText(randomarr.join(''));
	ctx.strokeStyle = 'rgba(0,0,0,0.5)';
	ctx.beginPath();
	ctx.lineTo(50, 102);
	ctx.lineTo(50 + te.width, 102);
	ctx.stroke();

	return canvas.toDataURL();//canvas转img src data64地址
}
//主页面
app.get('/',(req,res)=>{
	res.render('index.ejs')
});
//返回验证码图片src
app.get('/getcode',(req,res)=>{
	res.send(mackimage());
});
app.listen(3000);

node验证码demo下载

百度网盘传送门

提取密码：w2zw

下载完成后解压缩,安装本文上述依赖包后

1
2
3
4
5
6
7
cd node-canvas

npm i

node server.js

打开浏览器输入localhost:3000/   查看效果

日本镰仓朝圣之旅

2017-11-27

《灌篮高手》（SLAMDUNK，日语：スラムダンク）

十一假期去了趟日本，其中日本的神奈川县镰仓是必去的朝圣地点（灌篮高手片头曲出现的海边十字路口）。

漫画原型截图

实景照片(由于去的时候游客太多，自己站到一个高抬上勉强拍摄的)

PS:神奈川县立镰仓高等学校
这个学校就在这个著名的海边车站不远，这所高中其实就是湘北的原型，由于漫画太过出名，每天这里都有来自世界各地的漫迷在门口的合影留念，当然我也不例外23333

当年灌篮高手无论在中学或高中都十分火爆，这部动漫陪伴我们一代人成长的动漫，在我们成长的足迹里留下了深深的烙印。
如今有幸亲临现场，内心仿佛又变了当年10几岁的追风少年。
如今这个少年在另一个城市的CBD的某个大楼里成了IT大军里的一员。
当然现在一年也可以打2到3次球。哈哈，欢迎约篮球~


再见，青春。

San Francisco

2016-09-30

飞机上鸟瞰金门大桥


金门大桥白天外景

金门大桥白天外景，换一个优美的角度。

在三番市政府大厅参与老婆的哥哥的婚礼。第一次在国外参加当地人的婚礼也算深度体验了。

在斯坦福的照片，当时满脑子都是2005年乔帮主在这的那个著名的演讲，在这乔帮主说出了那句

“Stay hungry,Stay foolish”



你知道么大名鼎鼎的github就是在旧金山硅谷落户，这个章鱼猫就是从这里订购的。

三藩市街景

最后上一个来过三番市的证据，哈哈。

Hexo搭建静态博客

2016-09-29

Hexo 是一款基于 Node.js 的快速的、简单的博客框架，能够创建一个项目进行编辑后生成一套静态网页，比较适合个人博客搭建。因为 Hexo 生成的网页不依赖数据库和任何 Web 工具，所以可以把它放在 Github上，然后配置好域名以后进行访问。

1.安装前置条件

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：
Node.js
Git

2.安装hexo

windows

1
npm install hexo-cli -g

mac安装

1
sudo npm install hexo-cli -g

3.初始化博客

初始博客文件夹

1
hexo init blog

安装所需模块

1
cd blog && npm install

启动服务查看基本结构

1
hexo server

4.新建文章

添加文章为md格式来进行编写

1
hexo new '文章名'

5.发布到git上

下在hexo-deployer-git插件

1
npm install hexo-deployer-git --save

修改_config.yml

1
2
3
4
5
deploy:
  type: git
  repo: <repository url>
  branch: master
  message: push

部署

1
hexo deploy

© 2018 liushichen - Powered by Hexo - Theme Chan