node-canvas를 사용하여 인증 코드 작성

1단계 설치

node-canvas를 설치하기 전에 몇 가지 종속 항목을 설치해야 합니다. 시스템마다 요구되는 설치 요구 사항이 다릅니다.

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를 실행합니다.

2단계 드로잉

캔버스를 구해 컨텍스트 객체를 얻은 후 프런트 엔드처럼 그래픽을 그릴 수 있습니다

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

실제로는 제가 사용하는 API는 프론트엔드의 캔버스와 동일합니다. 그리는 과정에 대한 설명은 없습니다. 캔버스에 관련된 튜토리얼을 참고하시면 됩니다.

다음은 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 = &#39;#&#39; + (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 = [
    &#39;〇一二三四五六七八九&#39;,
    &#39;0123456789&#39;,
    &#39;零壹贰叁肆伍陆柒捌玖&#39;  
  ];
  // 第一个数字
  const fir = Math.floor(Math.random() * 10);
  // 第二个数字
  const sec = Math.floor(Math.random() * 10);
  // 随机选取运算
  const operArr = [&#39;加&#39;, &#39;减&#39;, &#39;乘&#39;];
  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(&#39;=&#39;, 100);
  drawText(&#39;?&#39;, 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;

그리기 인증코드입니다.

단계 3 그림으로 돌아가기

canvas.toDataURL()을 호출하여 이미지의 base64 형식 데이터를 반환합니다.

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

한자가 깨졌습니다

프로젝트를 Linux에 배포한 후 출력 이미지의 한자가 모두 상자로 변경된 것을 발견했습니다.

이 글 https://my.oschina.net/u/129529/blog/266843을 참고했는데 다 실행하지 않고

yum groupinstall "중국어 지원"을 설치했습니다. , yum groupinstall 이 두 가지 글꼴입니다.

또한 Microsoft Yahei를 사용하여 질문 https://cnodejs.org/topic/53f98ad8bbdaa79d518c0836의 5층을 참조하세요.

461호도 있는데, 글꼴 양쪽에 따옴표를 추가하세요.

이 세 단계를 수행한 후 프로젝트를 다시 시작했는데 괜찮았습니다~