xushubai-js_generates_qrcode: Создание QR-кода с логотипом и возможность его скачивания на JavaScript Для создания QR-кода с логотипом и добавления функции скачивания можно использовать библиотеку `qrcode-generator` и HTML5. Пример кода: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>QR-код с логотипом</title> <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode-generator.min.js"></script> </head> <body> <h1>Создание QR-кода с логотипом</h1> <div id="qrcode"></div> <a href="#" id="download">Скачать QR-код</a> <script> function createQRCodeWithLogo(qrData, logoUrl) { var qr = qrcode(0, 'L'); qr.addData(qrData); qr.make(); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = qr.getModuleCount() * 4; canvas.height = qr.getModuleCount() * 4; qr.toCanvas(ctx, function (error) { if (error) { console.error(error); return; } var logo = new Image(); logo.src = logoUrl; logo.onload = function () { ctx.drawImage(logo, 100, 100, 100, 100); document.getElementById('qrcode').appendChild(canvas); }; }); } document.getElementById('download').addEventListener('click', function () { var link = document.createElement('a'); link.href = document.getElementById('qrcode').getElementsByTagName('canvas')[0].toDataURL(); link.download = 'qrcode_with_logo.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); });

OSCHINA-MIRROR/xushubai-js_generates_qrcode

В этом репозитории не указан файл с открытой лицензией (LICENSE). При использовании обратитесь к конкретному описанию проекта и его зависимостям в коде.

Клонировать/Скачать

Ветки 1

Теги 0

Auto-commit by gitlife-ai-traslator service d4195f3

27 Коммитов

js高级二维码

README.md

index.html

qrcode.js

README.md

Этот код создает QR-код, добавляет логотип в центр QR-кода и добавляет кнопку для скачивания изображения QR-кода.


```html
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>

или с некоторыми опциями

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "http://jindo.dev.naver.com/collie",
	width: 200,
	height: 200,
	logo: './logo.jpg',
	colorDark: "#000000",
	colorLight: "#ffffff",
	correctLevel: QRCode.CorrectLevel.H
});
</script>

и вы можете использовать некоторые методы

qrcode.save();
qrcode.clear(); // очистить код.
qrcode.makeCode("http://naver.com"); // создать другой код.

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Создание QR-кода с логотипом и возможность его скачивания на JavaScript Для создания QR-кода с логотипом и добавления функции скачивания можно использовать библиотеку `qrcode-generator` и HTML5. Пример кода: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>QR-код с логотипом</title> <script src="https://cdn.jsdel... Развернуть

Отмена

Пока нет обновлений

JavaScript 61.4% HTML 38.5% CSS 0.1%

Содержание введения

Создание QR-кода с логотипом и возможность его скачивания на JavaScript

Для создания QR-кода с логотипом и добавления функции скачивания можно использовать библиотеку `qrcode-generator` и HTML5. Пример кода:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>QR-код с логотипом</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode-generator.min.js"></script>
</head>
<body>
    <h1>Создание QR-кода с логотипом</h1>
    <div id="qrcode"></div>
    <a href="#" id="download">Скачать QR-код</a>
    <script>
        function createQRCodeWithLogo(qrData, logoUrl) {
            var qr = qrcode(0, 'L');
            qr.addData(qrData);
            qr.make();

var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = qr.getModuleCount() * 4;
            canvas.height = qr.getModuleCount() * 4;

qr.toCanvas(ctx, function (error) {
                if (error) {
                    console.error(error);
                    return;
                }

var logo = new Image();
                logo.src = logoUrl;
                logo.onload = function () {
                    ctx.drawImage(logo, 100, 100, 100, 100);
                    document.getElementById('qrcode').appendChild(canvas);
                };
            });
        }

document.getElementById('download').addEventListener('click', function () {
            var link = document.createElement('a');
            link.href = document.getElementById('qrcode').getElementsByTagName('canvas')[0].toDataURL();
            link.download = 'qrcode_with_logo.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });

Главная

https://api.gitlife.ru/oschina-mirror/xushubai-js_generates_qrcode.git

git@api.gitlife.ru:oschina-mirror/xushubai-js_generates_qrcode.git

oschina-mirror

xushubai-js_generates_qrcode

master

OSCHINA-MIRROR/xushubai-js_generates_qrcode

Комментарии ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/xushubai-js_generates_qrcode .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Комментарии ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/xushubai-js_generates_qrcode