Создание SVG-капчи в Node.js

Переводы Английский

В каких случаях использовать SVG-капча?

• Невозможно использовать Google Recaptcha.
• Невозможно установить C++ модуль.

Установка

npm install --save svg-captcha

Использование

var svgCaptcha = require('svg-captча');

var c = svgCaptcha.create();
console.log(c);
// {data: '<svg.../svg>', text: 'abcd'}

Использование в express:

var svgCaptcha = require('svg-captcha');

app.get('/captcha', function (req, res) {
	var captcha = svgCaptcha.create();
	req.session.captcha = captcha.text;
	
	res.type('svg');
	res.status(200).send(captcha.data);
});

API

svgCaptcha.create(options)

Если не указано никаких параметров, сгенерированное изображение SVG будет содержать 4 символа.

• size: 4 // длина капчи
• ignoreChars: '0o1i' // символы, исключённые из капчи
• noise: 1 // количество линий помех
• color: true // наличие цвета у символов капчи, по умолчанию нет, если установлен фон, то по умолчанию есть
• background: '#cc9966' // цвет фона изображения капчи

Возвращаемый объект имеет следующие свойства:

• data: string // путь SVG
• text: string // текст капчи

svgCaptcha.createMathExpr(options)

Параметры и возвращаемые значения аналогичны предыдущему API. Отличие в том, что сгенерированный SVG представляет собой математическое выражение, а свойство text содержит результат выражения. Однако использование аналогично предыдущему.

svgCaptcha.loadFont(url)

Загрузка шрифта, заменяющего встроенный шрифт.

• url: string // путь к файлу шрифта Этот интерфейс вызывает одноимённый интерфейс opentype.js. Возможно, вам потребуется изменить некоторые настройки, чтобы ваш шрифт выглядел хорошо.
  Смотрите следующий интерфейс:

svgCaptcha.options

Это глобальный объект конфигурации. По умолчанию используются параметры создания и createMathExpr.
Помимо size, noise, color и background, вы также можете изменить следующие атрибуты:

• width: number // ширина капчи
• height: number // высота капчи
• fontSize: number // размер текста капчи
• charPreset: string // случайный набор символов

svgCaptcha.randomText([size|options])

Возвращает случайную строку

svgCaptcha(text, options)

Возвращает путь SVG на основе параметра text.
До версии 1.1.0 вам нужно было вызывать два предыдущих интерфейса, но теперь достаточно вызвать create().
Достаточно одного интерфейса (^_^)/

Примеры изображений

По умолчанию сгенерированное изображение:

Сгенерированная математическая формула и капча с цветом:

Почему используется формат SVG?

Не требуется ссылка на модуль C++.
Если вы думаете, что можно использовать регулярные выражения для сопоставления тега text, вы ошибаетесь. В этом проекте используется opentype.js, который преобразует текст в путь.
Другими словами, вы получаете '<path fill="#444" d="M104.83 19.74L107.85 19.74L112 33.56L116.13 19.74L119.15 19.74L113.48 36.85...' такой путь без тега text. Поэтому капча SVG может быть сложнее для распознавания, чем обычная картинка, потому что вам сначала нужно преобразовать её в другой формат.

Лицензия

MIT