Last active
May 16, 2020 19:56
-
-
Save evikza/d8e69fe14d2e88564415154c74ff9866 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Generation qr-code 🤠</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic" /> | |
| <!-- Подключаем файл jsPDF.js --> | |
| <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> | |
| </head> | |
| <body> | |
| <div | |
| class="wrapper" | |
| style="max-width: 980px; margin: 0 auto; padding: 1rem 0.5rem;" | |
| > | |
| <article class="card"> | |
| <header> | |
| <h3>Generation qr-code 🤠</h3> | |
| </header> | |
| <section> | |
| <textarea placeholder=""> | |
| https://localhost/?id_device=bedx0qQ</textarea | |
| > | |
| </section> | |
| <footer> | |
| <button class="gen-qr">Generate!</button> | |
| </footer> | |
| </article> | |
| </div> | |
| <script> | |
| // инициализация jsPDF | |
| var doc = new jsPDF(); | |
| // нажимаем на кнопку 'Generate!' | |
| document.querySelector('.gen-qr').addEventListener( | |
| 'click', | |
| () => { | |
| // записываем в переменную значение из textarea | |
| var valueTextarea = document.querySelector('textarea').value; | |
| // (небольшая проверка) если поле textarea не пустое — начинаем формировать ссылку на QR-code | |
| if (valueTextarea.length > 0) { | |
| var prepQrCodeUri = | |
| 'http://chart.apis.google.com/chart?' + | |
| convertString({ | |
| choe: 'UTF-8', | |
| chld: 'H', | |
| cht: 'qr', | |
| chs: '250x250', | |
| chl: valueTextarea, | |
| }); | |
| // запускаем функцию для преобразования ссылки-изображения в dataURL | |
| loadImage(prepQrCodeUri).then((linkQrCode) => { | |
| doc.text('Hello! Your QR-code:', 10, 20); | |
| doc.addImage(linkQrCode, 'PNG', 5, 25); | |
| // сохраняем полученный файл | |
| doc.save('your_qr-code.pdf'); | |
| }); | |
| } | |
| }, | |
| 0 | |
| ); | |
| // Вспомогательные функции: | |
| var convertString = function (params) { | |
| if (typeof params === 'object') { | |
| var concatObjToString = Object.keys(params) | |
| .map(function (key) { | |
| return key + '=' + params[key]; | |
| }) | |
| .join('&'); | |
| return concatObjToString; | |
| } else { | |
| return ''; | |
| } | |
| }; | |
| var loadImage = function (url) { | |
| return new Promise((resolve) => { | |
| let img = new Image(); | |
| img.onload = () => resolve(img); | |
| img.src = url; | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment