使用 node-canvas 绘制验证码

最近要给 node 项目加上验证码,找到了 node-canvas 这个库,简单地用了一下,发现还是蛮好用的。 git 地址: node-canvas

最近要给 node 项目加上验证码,找到了 node-canvas 这个库,简单地用了一下,发现还是蛮好用的。

git 地址: node-canvas

顾名思义,node-canvas 允许你在 node 端使用 canvas。在验证码这个使用场景里,我们可以先生成验证码,然后在 canvas 上绘制,最后将图片返回给前端。

step 1 安装

在安装 node-canvas 之前,还需要安装一些依赖。不同的系统需要安装的不同,以 linux 和 mac 为例:

  • linux: sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel

  • mac: brew install pkg-config cairo pango libpng jpeg giflib

其他参考 node-canvas#installation

安装完依赖后,执行 npm install canvas 即可。

step 2 画图

通过获取 canvas,可以得到 context 对象,然后就可以像在前端一样绘制图形了

const Canvas = require('canvas');const canvas = new Canvas(100, 30), ctx = canvas.getContext('2d');

实际上我用到的 api 和前端的 canvas 是一样的,绘制过程就不多解释,可以参考 canvas 的相关教程。

下面是绘制一个 a + b = ? 的验证码

ctx.font = '24px "Microsoft YaHei"'; // 绘制文本 let drawText = (text, x) => { ctx.save(); // 旋转角度 const angle = Math.random() / 10; // y 坐标 const y = 22; ctx.rotate(angle); ctx.fillText(text, x, y); ctx.restore(); } // 随机画线 let drawLine = () => { const num = Math.floor(Math.random() * 2 + 3); // 随机画几条彩色线条 for (let i = 0; i < num; i++) { const color = '#' + (Math.random() * 0xffffff << 0).toString(16); const y1 = Math.random() * height; const y2 = Math.random() * height; // 画线 ctx.strokeStyle = color; ctx.beginPath(); ctx.lineTo(0, y1); ctx.lineTo(width, y2); ctx.stroke(); } } // 数字的文本随机从小写汉字、大写汉字、数字里选择 const numArr = [ '〇一二三四五六七八九', '0123456789', '零壹贰叁肆伍陆柒捌玖' ]; // 第一个数字 const fir = Math.floor(Math.random() * 10); // 第二个数字 const sec = Math.floor(Math.random() * 10); // 随机选取运算 const operArr = ['加', '减', '乘']; const oper = Math.floor(Math.random() * operArr.length); drawLine(); drawText(numArr[Math.floor(Math.random() * numArr.length)][fir], 10); drawText(operArr[oper], 40); drawText(numArr[Math.floor(Math.random() * numArr.length)][sec], 70); drawText('=', 100); drawText('?', 130); // 验证码值的计算 let captcha; switch(oper) { case 0: captcha = fir + sec; break; case 1: captcha = fir - sec; break; case 2: captcha = fir * sec; break; } // 存入 session req.session.captcha = captcha;

效果如下:

使用 node-canvas 绘制验证码

step 3 返回图片

调用 canvas.toDataURL() ,可以返回图片的 base64 格式数据。

res.send({ status: 200, data: canvas.toDataURL()})

前端将该数据加到 img 的 src 属性中即可。

中文乱码

在将项目部署到 linux 后,发现输出显示的图片中的中文都变成了方框。

我参考了 redhat 6 下 node-canvas中文方框解决办法 这篇文章,但是没有全部运行,而是安装了 yum groupinstall "Chinese Support"yum groupinstall Fonts 这两个。

另外参考 用node-canvas绘制中文的时候乱码怎么解决? 问题里的 5 楼,使用了微软雅黑。

还有 issue#461 ,在字体两侧加上引号。

我按这三个做了,然后 重启项目 就好了~

未登录用户
全部评论0
到底啦