Skip to content

Claude-Ray/canvas-captcha

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

canvas-captcha

Build Status

基于node-canvas@2.x,主要作为示范,也可直接用于图片验证码产出。

建议直接引入node-canvas自行绘制验证码,项目尚需完善,欢迎PR。

Why

  • 相比于gm的cli调用,基于C++实现的node-canvas有性能优势
  • canvas标准绘图,对前端开发者更友好(也许并没有
  • 更好的扩展性

Samples

  • rjdx

    RJDX

  • hndd

    HNdD

Install

npm install canvas2-captcha

Usage

原生方法暂时只支持jpeg base64格式输出。

const captcha = new Captcha(120, 50, 4);

const {dataURL, text} = captcha.createCaptcha();

但支持自由组合,期间可对ctx任意调整,或附加更多操作。

// captcha初始化
const captcha = new Captcha(120, 50, 4);

// canvasRenderingContext2D初始化
const { canvas, ctx } = captcha.initCanvas();
// 举例,对ctx附加操作
ctx.globalAlpha = 0.8;
// 绘制文字
const text = captcha.drawText(ctx);
// 干扰线
captcha.drawLine(ctx);
// 干扰点
captcha.drawPoint(ctx);

// captcha或canvas都可用于图片输出
const dataURL = captcha.toDataURL(canvas);

registerFont()

Canvas2 actually supports Canvas::registerFont(ttf), according to Canvas#registerFont.

To use a font file that is not installed as a system font, use registerFont() to register the font with Canvas. This must be done before the Canvas is created.

canvas2-captcha supports this method, too. But you also need to pay attention to the similar tip: This must be done before createCaptcha or initCanvas.

const captcha = new Captcha(120, 50, 4);
// first register
captcha.registerFont('comicsans.ttf', { family: 'Comic Sans' });
// then create
const {dataURL, text} = captcha.createCaptcha();