Hola, este articulo es una continuación sobre Como crear un Código QR. esta vez, vamos a exportar QRCode como SVG, para de esta manera poder obtener una imagen que no perderá su calidad, no importa que tanto la amplíes o achiques.
Para comenzar con este tutorial, vamos a usar el mismo contenido usado en el tutorial donde creamos un generador de códigos QR. En el, solo vamos a eliminar parte del JavaScript para poder agregar nuevos códigos en los que solo nos enfocaremos en la generación de la imagen como vector, así como otras opciones que vamos a ir incluyendo.
Puedes acompañar este tutorial con este video explicando como hacerlo.
Preparar el script para Exportar
Lo primero que vamos a hacer es utilizar solo lo necesario del tutorial anterior: HTML, CSS y las variables declaradas en el script.
HTML
El HTML se va a quedar casi similar, con la diferencia de que vamos a cambiar el botón a «SVG QRCode», y su id a «btnsvg«. Ademas, vamos a eliminar todo dentro de la segunda etiqueta section, y vamos a agregar un comentario con «Presentar QRCode«. Todo lo demás se queda igual.
<section class="heading">
<h1>QRCodes Generator</h1>
<h2>Genera un QRCode para lo que desees</h2>
</section>
<section class="userinput">
<!-- <form action="POST"> -->
<label>Escribe Algo:
<input type="text" name="intext" id="intext">
</label><br>
<button type="submit" id="btnsvg">SVG QRCode</button>
<!-- </form> -->
</section>
<section>
<!-- Presentar QRCode -->
</section>CSS
El estilo se va a quedar igual a com estaba en el tutorial anterior. Solo cambiaremos enombre de #btngenera al nuevo id, asi que ahora se llamara #btnsvg
<head>
...
<!-- Style -->
<style>
section{text-align: center;}
.heading h2{font-size: 18px;}
.userinput{border: 1px solid grey;padding: 15px;margin: 5px; text-align: center;}
#intext{width: 100%; border: 1px solid lightslategray;border-radius: 25px;padding: 5px;}
#btnsvg, #dscr{margin: 10px auto;padding: 5px 10px;cursor: pointer;}
.qrcode-final img{margin: 15px auto;}
</style>
...
</head>JavaScript
Solo vamos a utilizar las variables que declaramos, con alguna modificación, ademas de tambien necesitamos la libreria qrcode.
<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
<script>
let btnsubmit = document.getElementById("btnsvg"),
user_input = document.getElementById("intext");
...
</script>Resultado
Modificar el HTML del QRCode
Para el HTML, vamos a agregar, donde generabamos antes el contenedor con el antiguo QRCode, una etiqueta svg en la que vamos a generar el codigo QR. Para ello, agregamos esto:
<!-- Generar SVG -->
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org.1999/xlink">
<g id="qrcodesvg" />
</svg>Ademas, vamos a incluir un boton para limpiar el codigo QR. Para esto agregamos un boton justo al lado del boton que generara el Codigo QR.
En HTML
...
<button type="submit" id="btnsvg">SVG QRCode</button>
<button id="tbnclear">Limpiar</button>
...En CSS
Incluye el estilo del botón.
...
#btnsvg, #dscr, #tbnclear{margin: 10px auto;padding: 5px 10px;cursor: pointer;}
...
Hasta aqui el HTML y el CSS. Ahora vamos a darle una funcionalidad a todo.
Script para crear el QRCode
Crear variables
Lo primero sera crear las variables que vamos a necesitar. Para esto vamos a agregar tres variables: qrcode_svg: para presentar el codigo QR final; tbnclear: Va a permitir limpiar el codigo QR; qrCodeSVG: para generar un nuevo objeto QRCode para generar nuestra imagen.
Variables
Vamos a llamar la etiqueta svg y el boton usando su id.
let btnsubmit = document.getElementById("btnsvg"),
...
qrcode_svg = document.getElementById('qrcodesvg'),
btnclear = document.getElementById('tbnclear');
...variable objeto
Ahora crearemos el objeto QRCode, dentro llamaremos a qrcode_svg, y le daremos parametros como ancho, alto, color oscuro y claro, ademas de la opcion useSVG.
var qrCodeSVG = new QRCode(qrcode_svg, {
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
useSVG: true
});Crear los eventos que generan y limpian el Codigo QR
Ahora vamos a crear los eventos para los botones que van a Exportar qrcode como svg.
SVG QRCode Boton
El evento va a ejecutar la funcion generasvg() la cual vamos a crear mas adelante.
btnsubmit.onclick = function(){
generasvg();
};Boton Limpiar
Limpiar es el mas simple. Dentro del evento onclick, vamos a llamar al objeto que elaboramos antes junto conla opcion clear(): qrCodeSVG.clear();
btnclear.onclick = function(){
qrCodeSVG.clear();
};Creando la Funcion generasvg()
Aqui vamos a crear la funcion generasvg(). Dentro de la misma, vamos a checkear que la casilla input tenga contenido, de lo contrario mostraremos una alerta señalando que se escriba algo y haremos enfoque en el input para escribir. Al final, generaremos el codigo usando makeCode con el valor dentro de la casilla input.
Codigo
function generasvg(){
if(!user_input.value){
alert("Escribe algo primero");
user_input.focus();
return;
}
qrCodeSVG.makeCode(user_input.value);
}Resultado
Ya con esto podemos generar el codigo QR.
Aunque en este punto, si hacemos click derecho en la imagen, podemos descargar la imagen como vector; lo próximo es generar el botón para lo mismo de una manera mas comoda.
Exportar Imagen SVG
Para exportar QRCode como svg, vamos a hacer algunas pequeñas modificaciones al codigo. Lo primero sera modificar un poco el codigo HTML dejandolo como aqui abajo:
<section id="bxd">
<h2 id="tatle"></h2>
<!-- Generar SVG -->
<a id="xlk">
<svg id="sVg"></svg>
</a>
</section>Como pueden ver, he agregado un etiqueta <a> la cual nos va a permitir hacer click en la imagen y descargarla.
Ahora vamos a modificar y agregar la parte de javasript para poder descargar la imagem. Primero vamos a agregar las variables.
...
let bxd = document.getElementById('bxd'),
svg = document.getElementById('sVg'),
xlk = document.getElementById('xlk'),
tatle = document.getElementById('tatle');
...como vamos a mostrar el texto que va a estar incluido en el codigo QR, vamos a agregar una function que se va a ejecutar cuando hagamos click en el boton de generar la imagen.
Acción onclick del botón
Agregar una nueva función que se ejecutara cuando generemos la imagen para mostrar el contenido de código QR. Luego agregaremos la posibilidad de limpiar el input.
btnsubmit.onclick = function(){
generasvg();
titleqr(tatle, user_input);
user_input.value = '';
};Funcion titleqr()
La función titleqr() va a contener dos variables, una para el titulo y otra para el valor. Cada vez que el valor del input cambie, el titulo cambiara para reflejar el nuevo contenido del código QR.
function titleqr(ta, txtval){
if(ta.innerText != ''){
ta.innerText = '';
ta.innerText = txtval.value;
}else{
ta.innerText = txtval.value;
}
}Función generasvg()
En la funcion generasvg(), vamos a agregar debajo de la condicion «if«, las siguientes lineas para el svg. Agregar una clase de estilo y un atributo.
function generasvg(){
...
svg.classList.add('qr');
svg.setAttribute( 'xmlns:xlink', "http://www.w3.org.1999/xlink");
...
}
Accion de Descarga
Luego, despues de la accion makeCode(), vamos a incluir las lineas para exportar y las cuales expliare mas abajo.
qrCodeSVG.makeCode(user_input.value);
...
var ser = new XMLSerializer(),
source = ser.serializeToString(svg);
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
xlk.download = 'svgfile.svg';
xlk.href = url;La primera linea declara una variable XMLSerializer() como método para construir una cadena XML que representa un árbol DOM. La segunda linea asigna serializeToString() a una variable source con el contenido de svg utilizando la variable declarada ser, de la manera serializeToString(svg) la cual construye una cadena que representa el árbol DOM especificado en formato XML. Luego, a la misma variable, le agregamos ‘<?xml version=»1.0″ standalone=»no»?>\r\n’ mas el contenido asignado al propio source.
Declaramos una variable url a la cual le asignamos la codificacion para svg asi como encodeURIComponent(source). Lo proximo es agregar el atributo download a la variable xlk la cual es la etiqueta de vinculo con un nombre, en mi caso svgfile.svg, y luego agregamos el atributo href al cual le asignamos el valor de la variable url.
