feat(qr): add background and foreground colors/gradient customization

src/components/tools/QrCode.vue

@@ -14,6 +14,12 @@ const text = useLocalStorage('text', '', 'qr-code')
 const ecc = useLocalStorage('ecc', 'M', 'qr-code')
 const size = useLocalStorage('size', 300, 'qr-code')
 const format = useLocalStorage('format', 'png', 'qr-code')
+const isBgTransparent = useLocalStorage('isBgTransparent', true, 'qr-code')
+const bgColor = useLocalStorage('bgColor', '#ffffff', 'qr-code')
+const fgType = useLocalStorage('fgType', 'solid', 'qr-code')
+const fgColor1 = useLocalStorage('fgColor1', '#000000', 'qr-code')
+const fgColor2 = useLocalStorage('fgColor2', '#10b981', 'qr-code')
+
 const svgContent = ref('')
 const previewRef = ref(null)
 
@@ -52,11 +58,16 @@ const generateQR = () => {
   worker.postMessage({
     id: latestJobId,
     text: text.value,
-    ecc: ecc.value
+    ecc: ecc.value,
+    isBgTransparent: isBgTransparent.value,
+    bgColor: bgColor.value,
+    fgType: fgType.value,
+    fgColor1: fgColor1.value,
+    fgColor2: fgColor2.value
   })
 }
 
-watch([text, ecc], () => {
+watch([text, ecc, isBgTransparent, bgColor, fgType, fgColor1, fgColor2], () => {
   generateQR()
 })
 
@@ -92,36 +103,43 @@ onUnmounted(() => {
 })
 
 const downloadFile = async () => {
-  if (!text.value) return
+  if (!text.value || !svgContent.value) return
 
   const filename = `qr-code-${Date.now()}.${format.value}`
 
   if (format.value === 'svg') {
-    // For SVG download, we might want to inject the size if user specifically requested it,
-    // but usually raw SVG is better.
-    // If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
-    const svgWithSize = await QRCode.toString(text.value, {
-      type: 'svg',
-      errorCorrectionLevel: ecc.value,
-      margin: 1,
-      width: size.value
-    })
-    const blob = new Blob([svgWithSize], { type: 'image/svg+xml' })
+    let finalSvg = svgContent.value
+    if (!finalSvg.includes('width=')) {
+      finalSvg = finalSvg.replace('<svg ', `<svg width="${size.value}" height="${size.value}" `)
+    }
+    const blob = new Blob([finalSvg], { type: 'image/svg+xml' })
     triggerDownload(blob, filename)
   } else {
-    // For raster formats, render to canvas first
     try {
       const canvas = document.createElement('canvas')
-      await QRCode.toCanvas(canvas, text.value, {
-        errorCorrectionLevel: ecc.value,
-        margin: 1,
-        width: size.value
-      })
+      canvas.width = size.value
+      canvas.height = size.value
+      const ctx = canvas.getContext('2d')
 
-      const mime = `image/${format.value}`
-      canvas.toBlob((blob) => {
-        if (blob) triggerDownload(blob, filename)
-      }, mime)
+      const img = new Image()
+      const svgSource = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent.value)}`
+
+      img.onload = () => {
+        if (format.value === 'jpeg' && isBgTransparent.value) {
+          ctx.fillStyle = '#ffffff'
+          ctx.fillRect(0, 0, size.value, size.value)
+        }
+        ctx.drawImage(img, 0, 0, size.value, size.value)
+
+        const mime = format.value === 'jpeg' ? 'image/jpeg' : `image/${format.value}`
+        canvas.toBlob((blob) => {
+          if (blob) triggerDownload(blob, filename)
+        }, mime, 1.0)
+      }
+      img.onerror = (e) => {
+        console.error('Failed to load SVG for conversion', e)
+      }
+      img.src = svgSource
     } catch (err) {
       console.error('Download failed', err)
     }
@@ -167,11 +185,38 @@ const triggerDownload = (blob, filename) => {
             <option value="H">High (30%)</option>
           </select>
         </div>
+
+        <div class="control-group">
+          <label>QR Style</label>
+          <select v-model="fgType" class="select-input">
+            <option value="solid">Solid Color</option>
+            <option value="linear">Linear Gradient</option>
+            <option value="radial">Radial Gradient</option>
+          </select>
+        </div>
+
+        <div class="control-group">
+          <label>QR Color(s)</label>
+          <div class="color-picker-wrapper">
+            <input type="color" v-model="fgColor1" class="color-input">
+            <input type="color" v-model="fgColor2" v-if="fgType !== 'solid'" class="color-input">
+          </div>
+        </div>
+
+        <div class="control-group">
+          <label>Background</label>
+          <div class="color-picker-wrapper">
+            <input type="color" v-model="bgColor" :disabled="isBgTransparent" class="color-input">
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="isBgTransparent"> Transparent
+            </label>
+          </div>
+        </div>
       </div>
 
       <div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
         <div class="qr-container">
-          <div class="qr-frame" v-html="svgContent"></div>
+          <div class="qr-frame" :style="{ background: isBgTransparent ? 'white' : bgColor }" v-html="svgContent"></div>
         </div>
 
         <div class="download-settings">
@@ -252,6 +297,42 @@ const triggerDownload = (blob, filename) => {
   color: var(--text-secondary);
 }
 
+.color-picker-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 38px;
+}
+
+.color-input {
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 1px solid var(--panel-border);
+  border-radius: 6px;
+  cursor: pointer;
+  background: var(--panel-bg);
+}
+
+.color-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  user-select: none;
+}
+.checkbox-label input {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+}
 
 .preview-section {
   display: flex;

src/workers/qrcode.worker.js

@@ -1,7 +1,7 @@
 import QRCode from 'qrcode'
 
 self.onmessage = async (e) => {
-  const { id, text, ecc } = e.data
+  const { id, text, ecc, isBgTransparent, bgColor, fgType, fgColor1, fgColor2 } = e.data
 
   if (!text) {
     self.postMessage({ id, svgContent: '' })
@@ -9,12 +9,27 @@ self.onmessage = async (e) => {
   }
 
   try {
-    const svgContent = await QRCode.toString(text, {
+    let svgContent = await QRCode.toString(text, {
       type: 'svg',
       errorCorrectionLevel: ecc,
       margin: 1,
+      color: {
+        dark: fgType === 'solid' ? fgColor1 : '#000000',
+        light: isBgTransparent ? '#00000000' : bgColor
+      }
     })
 
+    if (fgType !== 'solid') {
+      const isLinear = fgType === 'linear'
+      const defs = isLinear
+        ? `<defs><linearGradient id="qr-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></linearGradient></defs>`
+        : `<defs><radialGradient id="qr-grad" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></radialGradient></defs>`
+
+      svgContent = svgContent.replace('<svg ', `<svg >${defs}`)
+      // qrcode outputs <path stroke="#000000"...> so it's safe to replace
+      svgContent = svgContent.replace(/stroke="#000000"/g, 'stroke="url(#qr-grad)"')
+    }
+
     self.postMessage({ id, svgContent })
   } catch (err) {
     self.postMessage({ id, error: err.message })