NX.Qrcode
— QR canvas
NX.Qrcode membuat kode QR di browser sebagai canvas, memuat pustaka
QRious secara dinamis (unpkg) jika QRious belum
tersedia, lalu mengekspos pembaruan teks/warna, logo di tengah, tombol unduh/kustom, dan ekspor PNG.
API utama: new NX.Qrcode(containerId, options) setelah nxdom.js memuat
NX. Impor langsung: named export Qrcode dari
assets/modules/Qrcode/NexaQrcode.js.
Demo: templates/qrcode.js (rute /qrcode). QR untuk struk thermal:
NX.Escpos — qr().
1. Prasyarat & alur async
-
Elemen penampung harus sudah di DOM dengan
idsama argumen konstruktor. Tanpa node, konstruktor keluar lebih awal. -
Inisialisasi tidak sinkron: setelah konstruktor, modul memuat QRious lalu
init(). Sebelum siap, kontainer bisa menampilkan teks “Loading QR library…”. - Perlu jaringan (atau QRious global) agar skrip unpkg termuat.
<div id="qr-host"></div>const qr = new NX.Qrcode("qr-host", {
text: "https://example.com",
width: 200,
});
qr.updateText("Teks baru");2. Cara memakai (minimal)
const qr = new NX.Qrcode("my-qr", {
text: "Hello World",
width: 256,
height: 256,
showControls: false,
});
init() mengosongkan #my-qr, menambahkan .nexa-qrcode-container, dan menggambar QR.
3. Opsi konstruktor
| Opsi | Default | Keterangan |
|---|---|---|
text |
"Hello World" |
Isi yang di-encode |
width |
256 |
Diteruskan ke QRious sebagai size (lihat §8) |
height |
256 |
Disimpan di options; implementasi saat ini tidak memakai untuk ukuran canvas QRious |
colorDark |
"#000000" |
Foreground |
colorLight |
"#ffffff" |
Background |
correctLevel |
"M" |
L / M / Q / H — logo di tengah disarankan "H" |
debug |
false |
Disimpan; tidak memicu perilaku tambahan di kelas ini |
showControls |
false |
true → .nexa-qrcode-controls untuk tombol |
logo |
null |
URL atau data URI |
logoSize |
0.2 |
Fraksi lebar canvas (0–1) |
logoMargin |
8 |
Margin putih sekitar logo (px) |
logoRadius |
8 |
Radius sudut latar logo |
Properti lain pada options digabung lewat spread ke this.options.
4. Metode instance
| Metode | Keterangan |
|---|---|
generate(text) |
Gambar ulang QR; false jika teks kosong, library belum ada, atau error |
updateText(newText) |
Update options.text + generate |
updateOptions(partial) |
Merge partial + generate(this.options.text) |
downloadQR() |
Unduh PNG (canvas.toDataURL + anchor) |
getDataURL() |
data:image/png;base64,… atau null |
getBlob(callback) |
canvas.toBlob(callback, "image/png") |
clear() |
Kosongkan qrContainer, this.qrcode = null |
destroy() |
clear(), reset referensi internal |
createWrapper() mengosongkan innerHTML host — seluruh isi elemen dihapus saat
wrapper dibuat.
5. Kontrol tombol
Jika showControls: true, wadah tombol di bawah QR. Metode:
| Metode | Keterangan |
|---|---|
createDownloadButton(text?, className?) |
Tombol default → downloadQR() |
createCustomButton(text, callback, options?) |
className, warna, padding, fontSize, borderRadius, … |
addButtons(configs[]) |
type: "download" atau text + callback + options |
clearButtons() |
Kosongkan .nexa-qrcode-controls |
removeButton(className) |
Hapus pertama yang cocok — class tanpa titik (mis. "download-btn") |
createCustomButton saat kontrol belum ada akan memanggil createControlsContainer().
6. Logo
logo: URL atau data URI (data:image/png;base64,…).- Muat async; gagal → QR tetap tanpa logo.
correctLevel: "H"membantu saat tengah tertutup logo.
const qr = new NX.Qrcode("qr-host", {
text: "https://example.com",
width: 220,
correctLevel: "H",
logo: "/assets/images/favicon.ico",
logoSize: 0.22,
logoMargin: 10,
logoRadius: 10,
});7. Metode statis
const instance = NX.Qrcode.generateToElement("host-id", "teks", { width: 160 });
const canvas = await NX.Qrcode.generateToCanvas("teks", {
width: 140,
colorDark: "#000",
});generateToCanvas (async)
Menunggu _initPromise (load QRious + init), lalu poll hingga canvas ada. Batas
tunggu sekitar 10 detik; jika tidak ada canvas → null.
8. Catatan ukuran & QRious
Di generate(), QRious memakai size: this.options.width saja — hasil
persegi. height di options untuk konsistensi API / pengembangan; pada versi
ini tidak mengubah ukuran gambar.
9. Impor modul langsung
import { Qrcode } from "/assets/modules/Qrcode/NexaQrcode.js";
const qr = new Qrcode("qr-host", { text: "Hi", width: 200 });Tidak ada export default; di aplikasi Nexa pakai NX.Qrcode setelah nxdom.js.
Berkas implementasi
assets/modules/Qrcode/NexaQrcode.js · agregasi assets/modules/nxdom.js (Qrcode).