Как создать QR-код
QR-коды не для всех, но они мне нравятся. Если я увижу что-то, что я хочу запомнить или проверить позже, особенно в дороге, очень легко сделать быстрый снимок - это гораздо проще, чем пытаться запомнить URL, и гораздо быстрее, чем набирать его на крошечной клавиатуре.
Если вам нужно сгенерировать QR-коды для клиента или для себя, есть действительно хороший проект на JavaScript: node-qrcode. Давайте посмотрим на различные форматы wys и output, которые вы можете использовать для создания QR-кода!
Начните с установки библиотеки:
yarn add qrcode
Создать изображение QR-кода
С помощью доступной утилиты QR-кода вы можете сгенерировать URI данных для QR-кода, который вы можете использовать с img
элементом:
const generateQR = async text => {
try {
console.log(await QRCode.toDataURL(text))
} catch (err) {
console.error(err)
}
}
generateQR("https://davidwalsh.name");
/*
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAAAklEQVR4AewaftIAAAOMSURBVO3BQY7kRgADwWSh///l9B584EmAIPV41mBE/IOZfx1mymGmHGbKYaYcZsphphxmymGmHGbKYaYcZsphphxmymGmHGbKh4eS8JNUWhKayh1JaCotCU3ljiT8JJUnDjPlMFMOM+XDy1TelIQ7ktBUrqi0JNyRhKZyReVNSXjTYaYcZsphpnz4siTcofKbqHxTEu5Q+abDTDnMlMNM+fCXU2lJaEloKnckoak0lf+Tw0w5zJTDTPnwl0vCFZWWhKbyRBKayt/sMFMOM+UwUz58mco3qVxJQlP5TVR+k8NMOcyUw0z58LIk/KQkNJU7ktBUWhLelITf7DBTDjPlMFM+PKTyX1JpSWgqdyThTSp/k8NMOcyUw0z58FASmsqVJPykJDSVKyotCXckoalcSUJTaUm4Q+WJw0w5zJTDTIl/8EVJuKLSktBUnkhCU2lJeELljiS8SeVNh5lymCmHmRL/4Acl4YpKS0JTuSMJTeVKEppKS8ITKi0JV1SuJKGpPHGYKYeZcpgp8Q9elIQrKi0JV1RaEppKS0JT+aYkNJWWhCsqLQlPqDxxmCmHmXKYKR8eSkJTuUOlJaEl4Q6VloSm0pLQVK4k4ZtU7kjCmw4z5TBTDjMl/sEDSXhC5Y4kXFFpSWgqV5LwJpUrSWgqV5LQVN50mCmHmXKYKR++TOWOJHxTEu5QaUloKi0JLQlN5UoS7khCU3niMFMOM+UwUz68TKUloam0JDSVK0m4Q6Uloam8SeVKEppKS8IVlZaENx1mymGmHGZK/IMHktBUWhKuqFxJwhMqdyShqbQkfJNKS8IVlTcdZsphphxmyoeHVK6oPKFyJQlN5UoSvknljiT8JoeZcpgph5ny4aEk/CSVK0m4Q6Ul4YpKS8KVJDSVO1SuJKGpPHGYKYeZcpgpH16m8qYkvEmlJeGOJNyh8qYkNJU3HWbKYaYcZsqHL0vCHSpPqLQk3KHSknBHEn5SEprKE4eZcpgph5ny4X9O5YrKHSotCXeo/GaHmXKYKYeZ8uEvp9KS0FSuJKGpNJUrKi0JTeVKEn6Tw0w5zJTDTPnwZSr/pSQ0laZyJQlN5YkkXFFpSfhJh5lymCmHmfLhZUn4SUm4onIlCU8koam0JDSVK0loKleS8KbDTDnMlMNMiX8w86/DTDnMlMNMOcyUw0w5zJTDTDnMlMNMOcyUw0w5zJTDTDnMlMNM+Qeve5EOUrEhtwAAAABJRU5ErkJggg==
*/
Создать QR-код в терминале
Если вы хотите увидеть QR-код в терминале через Node.js, вы можете сделать это, передав объект конфигурации:
const generateQR = async text => {
try {
console.log(await QRCode.toString(text, {type: 'terminal'}))
} catch (err) {
console.error(err)
}
}
Сохранение QR-кода в файл
Вы можете создать изображение в формате PNG, SVG или JPG:
const generateQR = async text => {
try {
await QRCode.toFile('./davidwash-qr-code.png', text);
} catch (err) {
console.error(err)
}
}
Создать QR-код в canvas
Если вы используете такую утилиту, как Browserify и webpack, вы можете использовать qrcode
на стороне клиента:
var canvas = document.getElementById('canvas');
const generateQR = async text => {
try {
await QRCode.toCanvas(canvas, text)
} catch (err) {
console.error(err)
}
}
generateQR("https://davidwalsh.name");
Эта удивительная библиотека QR-кодов также позволяет вам создавать гораздо больше, чем я показал здесь, включая двоичные данные и различные варианты.