Home > Web Front-end > JS Tutorial > body text

Use node-canvas to draw verification code

高洛峰
Release: 2016-11-19 16:13:52
Original
2227 people have browsed it

step 1 Installation

Before installing node-canvas, you need to install some dependencies. Different systems require different installations. Take linux and mac as examples:

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

Other references node-canvas#installation

After installing the dependencies, execute npm install canvas.

step 2 Drawing

By getting the canvas, you can get the context object, and then you can draw the graphics like on the front end

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

In fact, the api I use is the same as the canvas on the front end, so the drawing process will not be explained much. , you can refer to the relevant tutorials on canvas.

The following is the verification code to draw 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;
Copy after login

The effect is as follows:

Use node-canvas to draw verification code

step 3 Return the image

Call canvas.toDataURL() to return the base64 format data of the image.

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

Chinese garbled characters

After deploying the project to linux, I found that the Chinese characters in the output images were changed into square boxes.

I referred to this article https://my.oschina.net/u/129529/blog/266843, but instead of running it all, I installed

yum groupinstall "Chinese Support", yum groupinstall Fonts these two .

Also refer to the 5th floor in the question https://cnodejs.org/topic/53f98ad8bbdaa79d518c0836, using Microsoft Yahei.

There is also issue#461, add quotation marks on both sides of the font.

I followed these three steps and then restarted the project and it was fine~


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!