Как скачать набор данных svg-captcha как изображение в javascript? - PullRequest
0 голосов
/ 13 июля 2020

Я использую npm модуль svg-captcha для генерации капчи. Когда мы создаем новую капчу, мы получаем набор данных, содержащий

{
  isMath: false,           // if true will be a simple math equation
  useFont: null,          // Can be path to ttf/otf font file
  size: 5,                // number of characters for string capthca
  ignoreChars: '0o1i',    // characters to not include in string capthca
  noise: 3,               // number of noise lines
  color: true,            // if true noise lines and captcha characters will be randomly colored
                          // (is set to true if background is set)
  background: null,       // HEX or RGB(a) value for background set to null for transparent
  width: 150,             // width of captcha
  height: 50,             // height of captcha
  fontSize: 56,           // font size for captcha
  charPreset: null,       // string of characters for use with string captcha set to null for default aA-zZ

}

Когда я визуализирую это в html как изображение, я вижу изображение


app.get('/captcha', captcha.generate())

    app.get('/', function (req, res, next) {
      res.type('html')
      res.end(`
        <img src="/captcha"/>

        <form action="/test" method="post">

          <input type="text" name="captcha"/>

          <input type="submit"/>

        </form>
      `)
    })

Как можно мы сохраняем эту '/ captcha' как изображение?

1 Ответ

0 голосов
/ 17 июля 2020

Здесь капча, которую мы получаем, когда говорим captcha.generate (), содержит данные и текст.

var new_Captcha = captcha.generate ()

new_Captcha: {"text": " какое-то значение captcha (например: AuEr) "," data ": <svg>... </svg>}

Поскольку данные, которые мы получаем, находятся в html, нам нужно преобразовать этот html в url usinf преобразователь Base64, чтобы мы могли you btoa (Встроенная функция в javascript)

Добавьте указанную выше закодированную строку Base64 к data:image/svg+xml;base64,, и мы получим URL-адрес, который в браузере отображает изображение. Используя этот URL, мы можем скачать изображение.

...