Add high-res QR code download (2048px)

Torey Heinz committed Jan 11, 2026

commit 3114d96edacbbdab79a583d8959a3448e88dff0b

Showing 1 changed file with 28 additions and 8 deletions

frontend/src/components/QRCodeModal.vue +28 -8

@@	@@ -32,10 +32,12 @@
	<div class="flex space-x-3">
	<button
	@click="downloadQR"
-	class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg font-semibold hover:bg-indigo-700 transition flex items-center justify-center"
+	:disabled="downloading"
+	class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg font-semibold hover:bg-indigo-700 transition flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
	>
-	<DownloadIcon class="h-4 w-4 mr-2" />
-	Download
+	<Loader2Icon v-if="downloading" class="h-4 w-4 mr-2 animate-spin" />
+	<DownloadIcon v-else class="h-4 w-4 mr-2" />
+	{{ downloading ? 'Generating...' : 'Download HD' }}
	</button>
	<button
	@click="copyQR"
@@	@@ -98,11 +100,29 @@ function getFullLogoUrl(logoUrl) {
	return logoUrl
	}

-	function downloadQR() {
-	const link = document.createElement('a')
-	link.download = `qr-${props.entry.slug}.png`
-	link.href = qrCodeUrl.value
-	link.click()
+	const downloading = ref(false)
+
+	async function downloadQR() {
+	downloading.value = true
+	try {
+	// Generate high-res version (2048px) for download
+	const logoUrl = props.entry.logo_url ? getFullLogoUrl(props.entry.logo_url) : null
+	const highResQR = await generateQRCodeWithLogo(shortUrl.value, logoUrl, { width: 2048, height: 2048 })
+
+	const link = document.createElement('a')
+	link.download = `qr-${props.entry.slug}.png`
+	link.href = highResQR
+	link.click()
+	} catch (error) {
+	console.error('Failed to generate high-res QR code:', error)
+	// Fallback to preview version
+	const link = document.createElement('a')
+	link.download = `qr-${props.entry.slug}.png`
+	link.href = qrCodeUrl.value
+	link.click()
+	} finally {
+	downloading.value = false
+	}
	}

	async function copyQR() {