gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(qr): implement background style and gradient support for QR generation

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-03-04 03:18:06 +00:00
parent 858e880c38
commit 9f9ea255a8
2 changed files with 58 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/workers/qrcode.worker.js
View File

@@ -1,7 +1,7 @@
import QRCode from 'qrcode'
self.onmessage = async (e) => {
const { id, text, ecc, isBgTransparent, bgColor, fgType, fgColor1, fgColor2 } = e.data
const { id, text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, fgType, fgColor1, fgColor2 } = e.data
if (!text) {
self.postMessage({ id, svgContent: '' })
@@ -15,19 +15,44 @@ self.onmessage = async (e) => {
margin: 1,
color: {
dark: fgType === 'solid' ? fgColor1 : '#000000',
light: isBgTransparent ? '#00000000' : bgColor
light: isBgTransparent ? '#00000000' : (bgType === 'solid' ? bgColor1 : '#00000000')
}
})
let defsHtml = ''
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>`
defsHtml += isLinear
? `<linearGradient id="qr-fg-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></linearGradient>`
: `<radialGradient id="qr-fg-grad" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></radialGradient>`
}
svgContent = svgContent.replace('shape-rendering="crispEdges">', `shape-rendering="crispEdges">${defs}`)
if (!isBgTransparent && bgType !== 'solid') {
const isLinear = bgType === 'linear'
defsHtml += isLinear
? `<linearGradient id="qr-bg-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></linearGradient>`
: `<radialGradient id="qr-bg-grad" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></radialGradient>`
}
if (defsHtml) {
svgContent = svgContent.replace('shape-rendering="crispEdges">', `shape-rendering="crispEdges"><defs>${defsHtml}</defs>`)
}
if (fgType !== 'solid') {
// qrcode outputs <path stroke="#000000"...> so it's safe to replace
svgContent = svgContent.replace(/stroke="#000000"/g, 'stroke="url(#qr-grad)"')
svgContent = svgContent.replace(/stroke="#000000"/g, 'stroke="url(#qr-fg-grad)"')
}
if (!isBgTransparent && bgType !== 'solid') {
// Find viewBox to inject background rect
const viewBoxMatch = svgContent.match(/viewBox="0 0 (\d+) (\d+)"/)
if (viewBoxMatch) {
const w = viewBoxMatch[1]
const h = viewBoxMatch[2]
// Inject a rect immediately inside the svg
svgContent = svgContent.replace('</defs>', `</defs><rect width="${w}" height="${h}" fill="url(#qr-bg-grad)" />`)
}
}
self.postMessage({ id, svgContent })