#javascript #html #qr-code
Вопрос:
Я бесчисленное количество раз искал в Интернете, пытаясь найти способ решить эту проблему, но каждый раз возвращался с пустыми руками. Я использую qrcode.js для создания QR-кодов для веб-сайта, но я не понял, как загрузить изображение после того, как оно было сгенерировано. Код, который я использую для генерации QR-кода, выглядит следующим образом:
var myQR = new QRCode(document.getElementById("qrcode"), {
text: "Made with QR Generator",
width: 128,
height: 128,
colorDark : qrdarkcolor,
colorLight : qrlightcolor,
correctLevel : QRCode.CorrectLevel.H
});
myQR.makeCode(qrdata);
Я пытаюсь найти способ либо загрузить QR-код в div, либо найти источник и создать кнопку, на которую пользователи могут нажать, чтобы загрузить изображение. Я приношу извинения, если это часто задаваемый вопрос, но я искал много других вопросов, похожих на этот, и не нашел четкого ответа. Я бы предпочел, чтобы этот сайт содержал только HTML, CSS и Javascript, если это возможно.
Спасибо!
Ответ №1:
Изображение генерируется с помощью плагина и занимает некоторое время для визуализации, поэтому метод необходимо выполнить с помощью setTimeout. После этого мы берем src изображение и применяем его к ссылке для загрузки (ссылка, в которой есть атрибут download )
Обратите внимание, что это не будет работать в безопасной среде фрагментов, но это было протестировано на обычной веб-странице и отлично работает.
const makeQR = (url, filename) => {
var qrcode = new QRCode("qrcode", {
text: "http://jindo.dev.naver.com/collie",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
qrcode.makeCode(url);
setTimeout(() => {
let qelem = document.querySelector('#qrcode img')
let dlink = document.querySelector('#qrdl')
let qr = qelem.getAttribute('src');
dlink.setAttribute('href', qr);
dlink.setAttribute('download', 'filename');
dlink.removeAttribute('hidden');
}, 500);
}
makeQR(document.querySelector('#text').value, 'qr-code.png') #qrcode {
width: 160px;
height: 160px;
margin-top: 15px;
} <script src="https://cdn.jsdelivr.net/npm/davidshimjs-qrcodejs@0.0.2/qrcode.min.js"></script>
<input id="text" type="text" value="https://stackoverflow.com" style="width:80%" /><br />
<div id="qrcode"></div>
<a id='qrdl' hidden>Download</a> Комментарии:
1. Ого, это работает! Большое спасибо за помощь! Я надеюсь, что другие пользователи с подобными вопросами смогут найти ответ полезным 🙂
2. У меня есть еще один вопрос. Загрузка отлично работает на моем ноутбуке, но когда я пытаюсь на своем телефоне, он пытается (и терпит неудачу) загрузить файл под названием ‘null.html». Ты знаешь, почему это так?
3. @Bookdog11 — Я обновил свой ответ и добавил имя файла, которое вы можете передать, поэтому при сохранении у него будет любое имя файла, которое вы ему дадите. Дайте мне знать, если это поможет решить проблему с мобильными устройствами, спасибо
4. Я попробовал, и, похоже, нет никакой разницы при загрузке файла. Когда я нажимаю «загрузить» на своем телефоне, я получаю и не кликабельное чтение уведомлений
filename.html | no file.5. Какой браузер? андроид? iOS? Это в приложении или просто на веб-сайте
Ответ №2:
Вы можете использовать Qurious для генерации QR-кода на холсте, а затем загрузить его. Qurious также имеет собственную опцию заполнения (она создает белые рамки вокруг qr-кода, чтобы его можно было отсканировать после загрузки).
Добавьте это в ту <head> часть:
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
Текст Html:
<canvas id="qrcode"></canvas>
Скрипт:
const makeQR = (your_data) => {
let qrcodeContainer = document.getElementById("qrcode");
qrcodeContainer.innerHTML = "";
new QRious({
element: qrcodeContainer,
value: your_data,
size: 600,
padding:50,
}); // generate QR code in canvas
downloadQR(); // function to download the image
}
function downloadQR() {
var link = document.createElement('a');
link.download = 'filename.png';
link.href = document.getElementById('qrcode').toDataURL()
link.click();
}
makeQR("Your value")