Как я могу взять источник динамически сгенерированного изображения JavaScript, чтобы я мог создать кнопку загрузки в мобHtml

Программисты Html
Ответить
Anonymous
 Как я могу взять источник динамически сгенерированного изображения JavaScript, чтобы я мог создать кнопку загрузки в моб

Сообщение Anonymous »

Я использую скрипт qrcode.js для генерации QR-кода, который я хочу загрузить, чтобы его можно было «отсканировать» на мобильном телефоне. Изображение QR-кода создается после того, как пользователь заполняет форму, и данные используются для генерации изображения. Это означает, что на мобильном телефоне я должен использовать: 'Запрос настольного сайта' , доступный в Chrome на Android Mobile. Однако в обычном режиме в Chome на Android Mobile, используя кнопку загрузки, загружает весь файл HTML. В настольном браузере и в режиме настольного компьютера ' для chome на Android я могу получить источник файла, напечатанный в поле оповещения, но в обычном режиме в мобильном браузере он возвращает пустую строку. Кроме того, хотя изображение все еще появляется на мобильной странице, я не могу нажать и держать его, чтобы инициировать загрузку. Если я сделаю то же самое на другое изображение, которое не генерируется JavaScript, как в коде ниже, я могу скачать его без проблем. < /P>

Код: Выделить всё

[img]logo.png[/img]
< /code>
Так генерируется qr-image и как создается кнопка загрузки: < /p>
const form = document.getElementById('generate-form');
const qr = document.getElementById('qrcode');

const onGenerateSubmit = (e) => {
e.preventDefault();

clearUI();

const name = document.getElementById('name').value;
var radios = document.getElementsByName("svc");
let reference = service + ' ' + name;

setTimeout(() => {
// Generate the QR code with qrcode.js
generateQRCode(reference);

setTimeout(() => {
// Grab the src of the QR image
const saveUrl = qr.querySelector("img").src;
createSaveBtn(saveUrl);
}, 1000);
}, 50);

}

const generateQRCode = (url) => {
const qrcode = new QRCode('qrcode', {
text: url,
width: 300,
height: 300,
});
}

const createSaveBtn = (saveUrl) => {
const link = document.createElement('a');
link.id = 'save-link';
alert(saveUrl);
link.classList = 'bg-red-500 hover:bg-red-700  text-white font-bold py-2 rounded w-1/3 m-auto my-5';
link.href = saveUrl;
link.download = 'qrcode';
link.innerHTML = 'Save Image';
document.getElementById('generated').appendChild(link);
};

const clearUI = () => {
qr.innerHTML = '';
const saveBtn = document.getElementById('save-link');
if (saveBtn) saveBtn.remove();
}

form.addEventListener('submit', onGenerateSubmit);
Ниже приведены изображения блока оповещения, на котором показаны src QR -кода в различных режимах на мобильных устройствах:
on mobile


Подробнее здесь: https://stackoverflow.com/questions/788 ... so-i-can-c
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»