Generador de código QR con logotipo y soporte de título-EasyQRCodeJS

Tiempo de ejecución: 30 minutos. Empezar

Autor: ushelp
Views Total: 453
Sitio oficial: Ir a la web
Actualizado: December 12, 2018
Licencia: MIT

Vista prévia

Generador de código QR con logotipo y soporte de título-EasyQRCodeJS

Descripción

EasyQRCodeJS es un navegador cruzado, del lado del cliente generador de código QR que soporta el logotipo personalizado y el título.

Basado en JavaScript, HTML5 Canvas y tabla HTML. Fuertemente basado en el qrcodejs biblioteca.

Funcionamiento

Instale & descargar.

# NPM
$ npm install easyqrcodejs --save

Importe el EasyQRCodeJS en el documento HTML.

<script src="easy.qrcode.js"></script>

Cree un contenedor en el que desee colocar el código QR.

<div id="qrcode"></div>

Genere un código QR básico.

var qrcode = new QRCode(document.getElementById("qrcode"), {


text: "https://wikicss.com"
});

Añade un logotipo personalizado al código QR.

var qrcode = new QRCode(document.getElementById("qrcode"), {


text: "https://wikicss.com",


logo: "logo.png"
});

Añadir título personalizado y subtítulo al código QR.

var qrcode = new QRCode(document.getElementById("qrcode"), {


title: 'QR Title',


titleFont: "bold 18px Arial",


titleColor: "#004284",


titleBgColor: "#fff",


titleHeight: 70,


 titleTop: 25,


subTitle: 'QR subTitle',


subTitleFont: "14px Arial",


 subTitleColor: "#004284",


subTitleTop: 40
});

Personaliza la apariencia del código QR.

var qrcode = new QRCode(document.getElementById("qrcode"), {


width: 256,


height: 256,


colorDark : "#000000",


colorLight : "#ffffff",


correctLevel : QRCode.CorrectLevel.H
});

Quite el código QR.

qrcode.clear();

Vuelva a generar un nuevo código QR.

qrcode.makeCode("New Content Here");

Te puede interesar: