QCode Pro | Générateur QR Code Professionnel

Créez des QR codes professionnels personnalisés en quelques clics Générateur de QR Code professionnel - Créez, personnalisez et analysez vos QR codes gratuitement div.bodie{ background-color : #f1f1f1; border-radius : 12px; padding: 10px; } input[type="color"]{ border: none; width: 32.5%; height: 40px; border-radius: 3px; } input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; } input[type="color"]::-webkit-color-swatch{ border: none; } a{ text-decoration: none; } .qr-text{ padding: 1rem; display: block; background: #333333; border: 1px solid #414866; border-radius: 4px; width: 100%; margin: 0.5rem 0 1rem 0; color: #fff; outline: none; } .qr-text::placeholder{ color: #8b92b7; font-weight: 500; } #qr-code{ height: 500px; width: 500px; display: flex; align-items: center; justify-content: center; border: 1px solid #414866; } #qr-code img, #qr-code canvas{ max-width: 100% !important; max-height: 100% !important; } .row{ display: flex; align-items: center; justify-content: space-between; } .sizes{ width: 32.5%; height: 40px; color: #fff; background: #333333; border: 1px solid #414866; border-radius: 4px; outline: none; } .btn{ color: #fff; max-width: 200px; padding: 14px; background: #333333; border-radius: 4px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; font-weight: 500; flex: 1; } .btn img{ width: 20px; margin-left: 10px; } .share-btn{ margin-left: 0.7rem; } .action-container{ display: flex; margin: 1rem 0; } @media (max-width: 512px){ #qr-code{ width: 221px; height: 221px; } #qr-code img, #qr-code canvas{ max-width: 221px !important; max-height: 221px !important; } .btn{ min-width: unset; } } @media (max-width: 350px){ .action-container{ flex-direction: column; } .share-btn{ margin-left: 0; margin-top: 0.7rem; } } 100×100 200×200 300×300 400×400 500×500 600×600 700×700 800×800 900×900 1000×1000 Télécharger Partager const download = document.querySelector(".download"); const dark = document.querySelector(".dark"); const light = document.querySelector(".light"); const qrContainer = document.querySelector("#qr-code"); const qrText = document.querySelector(".qr-text"); const shareBtn = document.querySelector(".share-btn"); const sizes = document.querySelector(".sizes"); dark.addEventListener("input", handleDarkColor); light.addEventListener("input", handleLightColor); qrText.addEventListener("input", handleQRText); sizes.addEventListener("change", handleSize); shareBtn.addEventListener("click", handleShare); const defaultUrl = "https://newinformatique24.com"; let colorLight = "#fff", colorDark = "#000", text = defaultUrl, size = 300; function handleDarkColor(e) { colorDark = e.target.value; generateQRCode(); } function handleLightColor(e) { colorLight = e.target.value; generateQRCode(); } function handleQRText(e) { const value = e.target.value; text = value; if (!value) { text = defaultUrl; } generateQRCode(); } async function generateQRCode() { qrContainer.innerHTML = ""; new QRCode("qr-code", { text, height: size, width: size, colorLight, colorDark, }); download.href = await resolveDataUrl(); } async function handleShare() { setTimeout(async () => { try { const base64url = await resolveDataUrl(); const blob = await (await fetch(base64url)).blob(); const file = new File([blob], "QRCode.png", { type: blob.type, }); await navigator.share({ files: [file], title: text, }); } catch (error) { alert("Your browser doesn't support sharing."); } }, 100); } function handleSize(e) { size = e.target.value; generateQRCode(); } function resolveDataUrl() { return new Promise((resolve, reject) => { setTimeout(() => { const img = document.querySelector("#qr-code img"); if (img.currentSrc) { resolve(img.currentSrc); return; } const canvas = document.querySelector("canvas"); resolve(canvas.toDataURL()); }, 50); }); } generateQRCode();