{"id":2439,"date":"2025-09-26T17:09:07","date_gmt":"2025-09-26T15:09:07","guid":{"rendered":"https:\/\/edukia.org\/?post_type=avada_portfolio&p=2439"},"modified":"2025-09-26T17:16:35","modified_gmt":"2025-09-26T15:16:35","slug":"qr-code-generator","status":"publish","type":"avada_portfolio","link":"https:\/\/edukia.org\/en\/resources\/qr-code-generator\/","title":{"rendered":"QR code generator"},"content":{"rendered":"

\u00a1Dale vida a tus enlaces con nuestra herramienta de generaci\u00f3n de c\u00f3digos QR! Esta aplicaci\u00f3n web te permite crear c\u00f3digos QR \u00fanicos y atractivos en cuesti\u00f3n de segundos, totalmente gratis y sin necesidad de registrarte.<\/span><\/p>\n

Funcionalidades Principales del Generador de c\u00f3digos QR<\/span><\/h2>\n

Nuestra aplicaci\u00f3n est\u00e1 dise\u00f1ada para ser potente y f\u00e1cil de usar. Estas son las caracter\u00edsticas que la hacen destacar:<\/span><\/p>\n

    \n
  • Generaci\u00f3n Instant\u00e1nea:<\/span><\/strong> Simplemente introduce cualquier URL o texto y obt\u00e9n tu c\u00f3digo QR al instante.<\/span><\/li>\n
  • Personalizaci\u00f3n de Colores:<\/span><\/strong> Olv\u00eddate de los aburridos c\u00f3digos en blanco y negro. Elige el color que prefieras tanto para el propio c\u00f3digo como para el fondo, permiti\u00e9ndote alinearlos con la identidad visual de tu marca.<\/span><\/li>\n
  • Logotipo Integrado:<\/span><\/strong> A\u00f1ade un toque profesional incorporando tu propio logotipo en el centro del c\u00f3digo QR. La aplicaci\u00f3n se encarga de optimizarlo, recort\u00e1ndolo en un formato circular elegante para asegurar una integraci\u00f3n perfecta y una alta legibilidad.<\/span><\/li>\n
  • Previsualizaci\u00f3n en Tiempo Real:<\/span><\/strong> Observa c\u00f3mo queda tu c\u00f3digo QR con cada cambio que realizas antes de generarlo.<\/span><\/li>\n
  • Alta Calidad y Descarga F\u00e1cil:<\/span><\/strong> Una vez est\u00e9s satisfecho con el resultado, puedes descargar tu c\u00f3digo QR personalizado en formato PNG de alta resoluci\u00f3n con un solo clic, listo para ser utilizado en tarjetas de visita, carteles, redes sociales o cualquier otro medio.<\/span><\/li>\n<\/ul>\n

    \u00bfC\u00f3mo Funciona?<\/span><\/h2>\n

    Crear tu c\u00f3digo QR personalizado es un proceso muy sencillo:<\/span><\/p>\n

      \n
    1. Introduce tu Contenido:<\/span><\/strong> Escribe o pega la URL o el texto que deseas codificar en el campo principal.<\/span><\/li>\n
    2. Elige tus Colores:<\/span><\/strong> Usa los selectores de color para personalizar el fondo y los elementos del c\u00f3digo QR.<\/span><\/li>\n
    3. Sube tu Logo (Opcional):<\/span><\/strong> Haz clic en \u00abSeleccionar Archivo\u00bb para subir una imagen desde tu dispositivo. Si te equivocas, puedes quitarla f\u00e1cilmente y seleccionar otra.<\/span><\/li>\n
    4. Genera el C\u00f3digo:<\/span><\/strong> Pulsa el bot\u00f3n \u00abGenerar QR\u00bb para que la magia ocurra.<\/span><\/li>\n
    5. Descarga y Comparte:<\/span><\/strong> \u00a1Listo! Tu c\u00f3digo QR aparecer\u00e1 en pantalla. Haz clic en \u00abDescargar QR\u00bb para guardarlo en tu dispositivo.<\/span><\/li>\n<\/ol>\n<\/div><\/div><\/div><\/div><\/div>
      \n\n\n \n \n Generador de C\u00f3digos QR con Logo<\/title>\n <!-- Tailwind CSS para un dise\u00f1o moderno y adaptable -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <!-- Biblioteca para generar los c\u00f3digos QR -->\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qrcodejs@1.0.0\/qrcode.min.js\"><\/script>\n <style>\n \/* Estilo para una animaci\u00f3n suave al aparecer *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n }\n .fade-in {\n animation: fadeIn 0.5s ease-in-out;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen font-sans\">\n\n <!-- He modificado esta l\u00ednea para asegurar el centrado en cualquier entorno -->\n <div class=\"bg-white w-full max-w-md p-8 rounded-xl shadow-lg mx-auto my-8\">\n \n <!-- Encabezado de la aplicaci\u00f3n -->\n <div class=\"text-center mb-8\">\n <h1 class=\"text-3xl font-bold text-gray-800\">Generador de C\u00f3digos QR<\/h1>\n <p class=\"text-gray-500 mt-2\">Crea c\u00f3digos QR personalizados con tu propio logo.<\/p>\n <\/div>\n\n <!-- Formulario de entrada -->\n <div class=\"space-y-4\">\n <div>\n <label for=\"urlInput\" class=\"block text-sm font-medium text-gray-700 mb-1\">URL o Texto<\/label>\n <input type=\"text\" id=\"urlInput\" placeholder=\"https:\/\/www.ejemplo.com\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200\" autocomplete=\"off\">\n <\/div>\n\n <!-- Selectores de color -->\n <div class=\"flex justify-between items-center space-x-4\">\n <div class=\"w-1\/2\">\n <label for=\"colorDark\" class=\"block text-sm font-medium text-gray-700 mb-1\">Color del QR<\/label>\n <input type=\"color\" id=\"colorDark\" value=\"#000000\" class=\"w-full h-10 p-1 border border-gray-300 rounded-lg cursor-pointer\">\n <\/div>\n <div class=\"w-1\/2\">\n <label for=\"colorLight\" class=\"block text-sm font-medium text-gray-700 mb-1\">Color de Fondo<\/label>\n <input type=\"color\" id=\"colorLight\" value=\"#ffffff\" class=\"w-full h-10 p-1 border border-gray-300 rounded-lg cursor-pointer\">\n <\/div>\n <\/div>\n \n <!-- Selector de Logo -->\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Logo (Opcional)<\/label>\n <div class=\"flex items-center space-x-2 mt-1\">\n <label for=\"logoInput\" class=\"cursor-pointer bg-white border border-gray-300 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors\">\n Seleccionar Archivo\n <\/label>\n <input type=\"file\" id=\"logoInput\" class=\"hidden\" accept=\"image\/png, image\/jpeg, image\/svg+xml\">\n <span id=\"logoName\" class=\"text-sm text-gray-500 truncate flex-grow\" style=\"max-width: 150px;\">Ning\u00fan archivo<\/span>\n <button id=\"removeLogoBtn\" class=\"hidden text-red-500 hover:text-red-700 font-bold text-xl leading-none px-2 rounded-full\">\u00d7<\/button>\n <\/div>\n <\/div>\n\n <button id=\"generateBtn\" class=\"w-full bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-200 !mt-6\">\n Generar QR\n <\/button>\n <\/div>\n\n <!-- \u00c1rea para mostrar el c\u00f3digo QR -->\n <div id=\"qr-container\" class=\"mt-8 flex flex-col items-center justify-center min-h-[256px] p-2 border border-dashed rounded-lg bg-gray-50\">\n <p id=\"placeholder-text\" class=\"text-gray-400\">El c\u00f3digo QR aparecer\u00e1 aqu\u00ed<\/p>\n <!-- El QR (img o canvas) se insertar\u00e1 aqu\u00ed por JS -->\n <\/div>\n\n <!-- Bot\u00f3n de descarga -->\n <div class=\"mt-4 text-center\">\n <a id=\"downloadBtn\" class=\"hidden w-full text-center bg-gray-200 text-gray-800 font-bold py-3 px-4 rounded-lg hover:bg-gray-300 transition duration-200 cursor-pointer\">\n Descargar QR\n <\/a>\n <\/div>\n \n <\/div>\n\n <script>\n const generateBtn = document.getElementById('generateBtn');\n const downloadBtn = document.getElementById('downloadBtn');\n const urlInput = document.getElementById('urlInput');\n const colorDarkInput = document.getElementById('colorDark');\n const colorLightInput = document.getElementById('colorLight');\n const qrContainer = document.getElementById('qr-container');\n const placeholderText = document.getElementById('placeholder-text');\n const logoInput = document.getElementById('logoInput');\n const logoName = document.getElementById('logoName');\n const removeLogoBtn = document.getElementById('removeLogoBtn');\n\n \/\/ Muestra el nombre del archivo del logo seleccionado y el bot\u00f3n de quitar\n logoInput.addEventListener('change', () => {\n if (logoInput.files.length > 0) {\n logoName.textContent = logoInput.files[0].name;\n removeLogoBtn.classList.remove('hidden');\n } else {\n logoName.textContent = 'Ning\u00fan archivo';\n removeLogoBtn.classList.add('hidden');\n }\n });\n\n \/\/ Limpia la selecci\u00f3n del logo\n removeLogoBtn.addEventListener('click', () => {\n logoInput.value = ''; \/\/ Esto es clave para limpiar la selecci\u00f3n\n logoName.textContent = 'Ning\u00fan archivo';\n removeLogoBtn.classList.add('hidden');\n });\n\n const generateQRCode = () => {\n const url = urlInput.value.trim();\n const colorDark = colorDarkInput.value;\n const colorLight = colorLightInput.value;\n const logoFile = logoInput.files[0];\n\n if (!url) {\n urlInput.focus();\n return;\n }\n\n \/\/ Limpiar el contenedor del QR anterior\n qrContainer.innerHTML = '';\n placeholderText.classList.add('hidden');\n downloadBtn.classList.add('hidden');\n \n \/\/ Generar el c\u00f3digo QR base usando la biblioteca\n new QRCode(qrContainer, {\n text: url,\n width: 256,\n height: 256,\n colorDark: colorDark,\n colorLight: colorLight,\n correctLevel: QRCode.CorrectLevel.H\n });\n\n \/\/ Esperar un momento a que la biblioteca genere la imagen del QR\n setTimeout(() => {\n const qrImg = qrContainer.querySelector('img');\n if (!qrImg) return;\n\n if (!logoFile) {\n downloadBtn.href = qrImg.src;\n downloadBtn.download = 'codigo-qr.png';\n downloadBtn.classList.remove('hidden');\n downloadBtn.classList.add('inline-block', 'fade-in');\n return;\n }\n\n const canvas = document.createElement('canvas');\n canvas.width = 256;\n canvas.height = 256;\n const ctx = canvas.getContext('2d');\n\n const logo = new Image();\n logo.src = URL.createObjectURL(logoFile);\n\n logo.onload = () => {\n ctx.drawImage(qrImg, 0, 0, 256, 256);\n\n const logoSize = canvas.width * 0.25;\n const logoX = (canvas.width - logoSize) \/ 2;\n const logoY = (canvas.height - logoSize) \/ 2;\n const logoRadius = logoSize \/ 2;\n const logoCenterX = logoX + logoRadius;\n const logoCenterY = logoY + logoRadius;\n \n \/\/ --- INICIO DE LA MODIFICACI\u00d3N ---\n \n \/\/ 1. Dibujar un fondo CIRCULAR detr\u00e1s del logo\n const bgMargin = 4;\n ctx.beginPath();\n ctx.arc(logoCenterX, logoCenterY, logoRadius + bgMargin, 0, Math.PI * 2);\n ctx.fillStyle = colorLight;\n ctx.fill();\n\n \/\/ 2. Crear una m\u00e1scara de recorte CIRCULAR\n ctx.save();\n ctx.beginPath();\n ctx.arc(logoCenterX, logoCenterY, logoRadius, 0, Math.PI * 2);\n ctx.closePath();\n ctx.clip();\n\n \/\/ 3. Dibujar el logo (se recortar\u00e1 a la forma del c\u00edrculo)\n ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);\n\n \/\/ 4. Restaurar el contexto del canvas para eliminar la m\u00e1scara\n ctx.restore();\n\n \/\/ --- FIN DE LA MODIFICACI\u00d3N ---\n\n qrContainer.innerHTML = '';\n qrContainer.appendChild(canvas);\n\n downloadBtn.href = canvas.toDataURL('image\/png');\n downloadBtn.download = 'codigo-qr-con-logo.png';\n downloadBtn.classList.remove('hidden');\n downloadBtn.classList.add('inline-block', 'fade-in');\n };\n \n logo.onerror = () => {\n console.error(\"No se pudo cargar el archivo del logo.\");\n downloadBtn.href = qrImg.src;\n downloadBtn.download = 'codigo-qr.png';\n downloadBtn.classList.remove('hidden');\n };\n\n }, 150);\n };\n\n generateBtn.addEventListener('click', generateQRCode);\n \n urlInput.addEventListener('keydown', (event) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n generateQRCode();\n }\n });\n\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Utiliza nuestro explorador de inteligencias artificiales para mantenerte al d\u00eda. \u00a1Actualizamos constantemente esta fant\u00e1stica lista!<\/p>","protected":false},"author":1,"featured_media":2444,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"portfolio_category":[53],"portfolio_skills":[],"portfolio_tags":[],"class_list":["post-2439","avada_portfolio","type-avada_portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio_category-utilidades"],"acf":[],"_links":{"self":[{"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/avada_portfolio\/2439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/avada_portfolio"}],"about":[{"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/types\/avada_portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/comments?post=2439"}],"version-history":[{"count":3,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/avada_portfolio\/2439\/revisions"}],"predecessor-version":[{"id":2445,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/avada_portfolio\/2439\/revisions\/2445"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/media\/2444"}],"wp:attachment":[{"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/media?parent=2439"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/portfolio_category?post=2439"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/portfolio_skills?post=2439"},{"taxonomy":"portfolio_tags","embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/portfolio_tags?post=2439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}