Как создать QR-код по строке и направить его пользователю на скачивание?

Question

[Evgen Bolat]

Суть такая. При нажатии на кнопку (onClick событие) должен создаваться QR-код(отображение для пользователя не нужно) по строке(рандомно генерирующийся набор символ) и отправляться на скачивание пользователю в виде png-картинки. Я видел библиотеки, которые просто отображают на странице QR-код, но его отображение в какой-либо файл для скачивания – не нагуглил пока что. Скачивание файла хотел реализовать при помощи атрибута download у тега Буду очень рад, если сможете подсказать способ р...

Answer 1

[Александр]

Делаю для себя одностраничное приложение:
https://gitverse.ru/NeiroN/HTML/content/main/QRcod...

Пошел по пути Текст->QRcode SVG->тег img->тег canvas->тег a->сохранение

function convertPng(svg,size,name){
let canvas = document.createElement("canvas");canvas.width=size;canvas.height=size;
let img = new Image();img.width=size;img.height=size;
let a = document.createElement("a");a.download=name;
img.onload = function() {canvas.getContext('2d').drawImage(img, 0, 0);a.href=canvas.toDataURL("image/png");a.click();img.remove();canvas.remove();a.remove()}
img.src = "data:image/svg+xml,"+encodeURIComponent(svg);
}

convertPng(new QRCode({
  content: "http://github.com/",
  padding: 4,
  width: 256,
  height: 256,
  color: "#000000",
  background: "#ffffff",
  ecl: "M",
}).svg(),256,'Test.png')

Библиотека когда-то отсюда взята: https://github.com/papnkukn/qrcode-svg

Answer 2

[Алексей Ярков]

Вы даже не потрудились загуглить пример? Вот надо динамически создать тег a с нужными атрибутами, кликнуть по нему и удалить.

Обновлено.
И снова я за вас погуглил )) Вот так можно сгенерировать налету и скачать как картинку.
https://codepen.io/yarkovaleksei/pen/OJGOzww?edito...

Comments

[Evgen Bolat]

Прошу прощения, но вы видимо не потрудились прочитать мой вопрос в том числе :)
У меня нет ссылки изначально на файл, я и уточнил, что проблема в преобразовании строки в qr-код с ссылкой на образовавшийся файл. download тут в самом конце юзается, и я прекрасно знаю о нём и динамическом создании элементов.

Answer 3

[Nik Faraday]

Для генерации можете использовать этот QR Code Generator (Я его не пробовал, по этому не знаю что там к чему).
Для UI по QR кодам можете использовать QRCode от Ant Design