Библиотека генерации QR-кода в JavaScript
В настоящее время я ищу библиотеку js, которая может кодировать текст в qr-кодах. Единственный , которого я смог найти до сих пор, кажется сломанным, хотя другие люди утверждают, что используют его. Пример страницы не работает. Немного поиграв с этим, мне удалось сгенерировать коды, но они не декодируются программным обеспечением телефона.
Есть ли еще библиотека для этого? Кому-нибудь удалось заставить его работать?
Меня не интересует решение, которое извлекает код из онлайн-сервиса (kaywa, google и т. Д.).
Обновление:
Ну, ребята, вы правы, библиотека работает . Моя проблема заключалась в том, что я пытался включить его в страницу HTML5 Boilerplate, и document.write, похоже, не работает в этом. В любом случае я изменил пример кода, чтобы браузер рисовал на холсте, а не в таблице, и я получил порядок функции fillRect в обратном направлении. Ниже приведен исправленный вызов функции.
context.fillRect(c * UNIT_SIZE, r * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
// it's column-row, not row-column; don't ask why :)
Так как мое изображение больше не транспонируется :), теперь qr прекрасно декодируется. Спасибо за поддержку.
1 ответ
Я знаю, что это - старый вопрос, но я думаю, что библиотека не необходимо генерировать QR-код из текста. Просто необходимо использовать QR-код API .
реализация очень проста, у нас есть форма с текстовым полем, которое собирает данные содержания. Каждый раз, когда мы нажимаем генерировать кнопку, мы генерируем новый URL запроса к API, этот URL имеет два основных компонента data и size. Первый требует текстового закодированного содержания, и последний определит размер изображения. Вот код:
let baseURL = 'https://api.qrserver.com/v1/create-qr-code/?data='
let config = '&size=120x120'
let btn, qrCode, content;
function htmlEncode(value) {
return $('<div/>').text(value).html();
}
$(function() {
btn = $('#generate');
qrCode = $('.qr-code');
content = $('#content');
btn.click(function() {
qrCode.attr('src', baseURL + encodeURIComponent(htmlEncode(content.val())) + config);
});
});.qr-code {
max-width: 160px;
margin: 10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="text-center">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=http%3A%2F%2Fwww.google.com&size=120x120" class="qr-code img-thumbnail img-responsive">
</div>
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" for="content">Enter content:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="content" placeholder="i.e. www.google.com">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="generate">Generate</button>
</div>
</div>
</div>
</div>