Cómo poner tu logo en un código QR

Los códigos QR son increíblemente útiles por todos los usos que les podemos dar, ya que condensan un pedazo de información en un pequeño cuadro estándar que podemos escanear fácilmente. Ahora, seamos honestos, estos códigos, aunque son muy prácticos, a veces pueden resultar algo desagradables a la vista, por no decir feos, y más allá de su estética, es imposible para el ojo humano saber si estamos escaneando algo legítimo. Una cosa que puede ayudar en este sentido, es simplemente poner alguna imagen en el código, y es lo que aprenderemos a hacer hoy: poner nuestro logo en un código QR usando Hojas de Cálculo de Google.

¿Se puede meter un logo o una imagen al código QR?

Una pregunta importante antes de continuar, es si es posible combinar un código QR con un logo. La respuesta sencilla y rápida es que sí. Pero es muy importante entender por qué. La razón no es precisamente porque el estándar soporte tener logos encima, sino más bien porque por la manera en que funciona la codificación, existe redundancia de la información dentro del mismo. Esto quiere decir que aunque no esté disponible el código completo, aun así podrá recuperarse la información. La recomendación en este sentido es que no se bloquee más del 30% del código, de lo contrario, no se podrá escanear correctamente.

QR con logotipo

Ahora, superponer una imagen encima de otra es algo muy sencillo que puedes lograr rápidamente con cualquier editor de imágenes. Solamente necesitas tu código y tu logo, los posicionas… y listo. Hay algunas páginas de generación de QR que lo hacen por ti, pero la desventaja es que muchas cobran algo por este extra de hacerlo con tu logo. A nosotros en Tesel lo que nos gusta es ver si podemos ir un paso más allá para automatizar y controlar estos procesos para hacerlos funcionar a nuestro favor, porque pueden llegar a ser tediosos si tienes que hacerlos muchas veces. El reto entonces será crearnos una pequeña herramienta en Google Sheets que haga la mayor parte del trabajo por nosotros.

Preparar la hoja de cálculo

Bueno, lo primero que haremos será preparar nuestra hoja de cálculo, que servirá de interfaz gráfica para configurar nuestro código con nuestro logo.

Tenemos dos celdas que tenemos que llenar: el dato a codificar, que será convertido a un código QR (que puede ser cualquier dirección web, por ejemplo), y la URL o dirección de nuestro logo subido a Google Drive. Esta dirección la obtenemos fácilmente si hacemos click derecho en el archivo, elegimos Compartir y luego copiamos el vínculo con la opción Copiar vínculo.

Antes de irnos de esta pantalla haremos una cosa más: daremos acceso al archivo a Cualquier usuario que tenga el vínculo en la web. Esto es para que podamos visualizar el logo en la hoja de cálculo con la fórmula IMAGE como hemos aprendido en guías anteriores.

Compartir imagen con cualquier usuario que tenga la dirección y copiar vínculo

Una consideración importante para la herramienta que vamos a construir es que la imagen de nuestro logo debe tener ciertas características:

La imagen debe estar en formato PNG
La imagen preferiblemente debe ser pequeña en tamaño (no más de 100 KB)
La imagen funcionará mejor si está en formato cuadrado
La versión de nuestro logo deberá ser la más sencilla posible, para que se distinga del código QR

Ahora sí, los demás datos que requerimos se llenarán automáticamente a partir de nuestra información, solamente tenemos que usar las siguientes fórmulas.

En el dato de URL QR usamos el método que hemos revisado varias veces para generar una imagen de código QR:

="https://api.qrserver.com/v1/create-qr-code/?size=250x250&data="&ENCODEURL(B1)

Actualización 2024: Google retiró el servicio chart.googleapis.com, por lo que se debe usar una alternativa como api.qrserver.com

Lo necesitamos separado de la imagen porque lo usaremos tal cual está en los siguientes pasos.

En el dato de Imagen QR simplemente mostramos esta imagen con la fórmula IMAGE:

=IMAGE(B4)

Y finalmente, en el dato de Imagen logo utilizamos esta fórmula para mostrar una imagen de nuestro Google Drive en una celda:

=IMAGE("https://drive.google.com/uc?id="&REGEXEXTRACT(B2,"open\?id=(.*)"))

Interfaz en hoja de cálculo para poner un logo en un código QR

Combinar un código QR con un logo

OK, ahora que ya tenemos lista nuestra interfaz para fácilmente codificar un QR y ver nuestro logo, lo que sigue es combinar ambas imágenes en una sola para poder guardarla como archivo por separado.

Para esto, haremos uso de un poco de código de Apps Script. No te preocupes, no es mucho ni muy complicado y lo explicaremos paso a paso.

Entonces, vamos primero al menú de Extensiones – Apps Script. Se creará un proyecto de código asociado a nuestra hoja de cálculo. Vamos a reemplazar el código que vemos con este:

function onOpen() {
 SpreadsheetApp.getUi()
  .createMenu("QR")
    .addItem("Generar QR con logo", "qr_panel")
    .addToUi();
}

function qr_panel() {
  // URL completa de la imagen del código QR
  var qr_bg_url = SpreadsheetApp.getActiveSheet().getRange("B4").getValue();
  // Código QR en base64
  var qr_img = Utilities.base64Encode(UrlFetchApp.fetch(qr_bg_url).getBlob().getBytes());

  // URL del logo en Google Drive
  var logo_drive_url = SpreadsheetApp.getActiveSheet().getRange("B2").getValue();
  // Obtenemos el ID a partir de la URL, con regex
  var logo_file_id = logo_drive_url.replace(/https:\/\/drive\.google\.com\/open\?id=([\w\-_]*)/gi,'$1');
  // Obtenemos el archivo de Google Drive
  var logo_file = DriveApp.getFileById(logo_file_id);
  // Codificamos la imagen en base64
  var logo_img = Utilities.base64Encode(logo_file.getBlob().getBytes());
  
  // Mostramos el panel de la derecha e insertamos código HTML
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(`
  <!DOCTYPE html>
  <html>
    <head>
      <base target="_top">
    </head>
    <body>
      <div id="qr" style="position:relative;width:250px;height:250px;">
        <img src="data:image/png;base64,${qr_img}" style="position:absolute;top:0;left:0;">
        <img src="data:image/png;base64,${logo_img}" style="position:absolute;top:50%;left:50%;width:50px;transform: translate(-50%, -50%)">
        <div id="qr_top" style="position:absolute;top:0;left:0;z-index:1"></div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
      <script>
        var qr = document.getElementById("qr");
        domtoimage.toPng(qr).then(function(dataUrl) {
          var img = new Image();
          img.src = dataUrl;
          document.getElementById("qr_top").appendChild(img);
        });
      </script>
    </body>
  </html>
  `).setTitle("QR"));
}
Lenguaje del código: JavaScript (javascript)

Vamos a explicar el código para que nos haga sentido todo lo que está pasando. Primero en onOpen hacemos un menú que llamará a la función qr_panel. Esto lo hemos hecho muchas en guías anteriores para facilitarnos ejecutar el código desde la hoja de cálculo.

function onOpen() {
 SpreadsheetApp.getUi()
  .createMenu("QR")
    .addItem("Generar QR con logo", "qr_panel")
    .addToUi();
}
Lenguaje del código: JavaScript (javascript)

En esta función qr_panel, haremos varias cosas. Primero obtenemos el dato de la URL completa de la imagen del código QR, que está en B4. Luego usamos esta dirección para ir por esa imagen con UrlFetchApp, y la convertimos al formato base64. Base64 es un sistema de codificación que usa 64 como base, y nos sirve en este caso para manejar la imagen como si fuera una cadena de texto y mandarla al HTML directamente, sin tener que lidiar con archivos temporales o externos.

function qr_panel() {
  // URL completa de la imagen del código QR
  var qr_bg_url = SpreadsheetApp.getActiveSheet().getRange("B4").getValue();
  // Código QR en base64
  var qr_img = Utilities.base64Encode(UrlFetchApp.fetch(qr_bg_url).getBlob().getBytes());


  //... 
}
Lenguaje del código: JavaScript (javascript)

Ahora revisemos el código que tiene que ver con la imagen del logo. Primero obtenemos la URL que se encuentra en la celda B2, y después con una expresión regular (osea regex), extraemos el identificador del archivo al final de la dirección. Este lo necesitamos para obtener el archivo de Google Drive y luego codificarlo también en formato base64.

// URL del logo en Google Drive
  var logo_drive_url = SpreadsheetApp.getActiveSheet().getRange("B2").getValue();
  // Obtenemos el ID a partir de la URL, con regex
  var logo_file_id = logo_drive_url.replace(/https:\/\/drive\.google\.com\/open\?id=([\w\-_]*)/gi,'$1');
  // Obtenemos el archivo de Google Drive
  var logo_file = DriveApp.getFileById(logo_file_id);
  // Codificamos la imagen en base64
  var logo_img = Utilities.base64Encode(logo_file.getBlob().getBytes());
Lenguaje del código: JavaScript (javascript)

Ya tenemos las dos imágenes en el formato que nos funciona mejor, y ahora sigue la parte del código que las combina. Para esto necesitamos generar una página en HTML que mostraremos en el panel de la derecha (también llamado sidebar). En este código HTML insertamos las imágenes, con un poco de CSS las posicionamos una encima de otra dentro de un elemento div, y con una librería de JavaScript llamada DOM to Image, generamos una imagen nueva a partir de lo que se ve en pantalla de este div. Es decir, convierte el HTML visible en imagen, como si le tomara una foto o captura a ese pedazo de página. Esta nueva imagen la insertamos en la página, y por posicionamiento quedará justo encima de lo que teníamos.

  // Mostramos el panel de la derecha e insertamos código HTML
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(`
  <!DOCTYPE html>
  <html>
    <head>
      <base target="_top">
    </head>
    <body>
      <div id="qr" style="position:relative;width:250px;height:250px;">
        <img src="data:image/png;base64,${qr_img}" style="position:absolute;top:0;left:0;">
        <img src="data:image/png;base64,${logo_img}" style="position:absolute;top:50%;left:50%;width:50px;transform: translate(-50%, -50%)">
        <div id="qr_top" style="position:absolute;top:0;left:0;z-index:1"></div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
      <script>
        var qr = document.getElementById("qr");
        domtoimage.toPng(qr).then(function(dataUrl) {
          var img = new Image();
          img.src = dataUrl;
          document.getElementById("qr_top").appendChild(img);
        });
      </script>
    </body>
  </html>
  `).setTitle("QR"));
Lenguaje del código: JavaScript (javascript)

Probando nuestro generador de códigos QR con logo

Ya estamos por terminar, porque es hora de probar nuestro generador de códigos QR con logotipo. Guardamos nuestro código y vamos a la hoja de cálculo. Debemos ver nuestro menú QR. Lo elegimos y usamos la opción Generar QR con logo. La primera vez que lo usemos, nos pedirá permiso para ejecutar el código y acceso a nuestro Drive. Como es nuestra propia aplicación, es seguro permitirlo.

Ya con los permisos en orden, intentamos de nuevo usar nuestro menú y debemos ver cómo se abre un panel a la derecha de nuestra hoja de cálculo en donde tenemos el resultado final: nuestro código QR con el logo encima. Esta imagen la podemos guardar en nuestra computadora o copiar y pegar en un mensaje, en un documento, etcétera. Ojo aquí, siempre en este paso debes probar escaneando tu propio QR para asegurarte de que el logo no tapa tanto del código que ya no se pueda escanear. En nuestro caso vemos que funciona perfectamente, ¿está genial no lo crees? 😀

Usando Apps Script para poner un logo en un código QR

Si probamos con otra dirección u otro logotipo modificando los datos de la hoja de cálculo, debe funcionar correctamente.

Este método tiene muchas ventajas si te gusta crear tus propias herramientas de trabajo, porque podrías extenderlo para generar muchos QR con logo a la vez o hacer que se inserten directamente a Google Drive, o hacer que las dimensiones finales se tomen de un parámetro en una celda, por ejemplo. Tu imaginación es el límite. Házme saber en los comentarios qué otra cosa te gustaría poder hacer con los códigos QR, para saber qué videos te interesa ver en un futuro.

Guía en video

Si tienes dudas puedes ver esta misma guía explicada en video:

Plantilla terminada para descargar

Plantilla para Poner tu logo en un código QR con Google Sheets

¡Espero que te haya sido útil esta guía! No olvides seguirnos en YouTube para más tips, trucos y guías de productividad.

Si te interesa aprender más sobre Google Sheets, checa nuestro Curso: Aprende Sheets en el que Alekz te guiará para elevar tu aprendizaje de hojas de cálculo al nivel experto.

Alekz

Alekz es un apasionado de la tecnología y los videojuegos. Además de ser locutor comercial, disfruta de la expresión artística más sastisfactoria y técnica que existe: programar (y pintar algo de pixel art). Fundó Tesel para ayudar a empoderar a las empresas a desarrollar su máximo potencial mediante la tecnología. Es un absoluto nerd de Star Trek.