mirror of
https://github.com/voltbonn/qrcode.volt.link.git
synced 2024-09-28 12:53:06 +00:00
added transparent background option
This commit is contained in:
parent
4fda0a95ac
commit
4268dc204c
|
@ -20,6 +20,7 @@ yellow = Gelb
|
|||
green = Grün
|
||||
blue = Blau
|
||||
red = Rot
|
||||
transparent = Transparent
|
||||
|
||||
display_logo_headline = Logo Wassermarke
|
||||
label_display_logo_yes = Ja
|
||||
|
|
|
@ -20,6 +20,7 @@ yellow = Yellow
|
|||
green = Green
|
||||
blue = Blue
|
||||
red = Red
|
||||
transparent = Transparent
|
||||
|
||||
display_logo_headline = Display Logo
|
||||
label_display_logo_yes = Yes
|
||||
|
|
|
@ -47,6 +47,7 @@ const colors = {
|
|||
'green': '#1BBE6F',
|
||||
'blue': '#82D0F4',
|
||||
'red': '#E63E12',
|
||||
'transparent': 'transparent',
|
||||
}
|
||||
|
||||
function generate_qr_code({ content, size, errorCorrectionLevel, backgroundColor, foregroundColor, displayLogo }) {
|
||||
|
@ -119,7 +120,7 @@ function generate_qr_code({ content, size, errorCorrectionLevel, backgroundColor
|
|||
}
|
||||
}
|
||||
|
||||
if (this_foregroundColor !== 'white') {
|
||||
if (this_foregroundColor !== 'white' && this_backgroundColor !== 'transparent') {
|
||||
this_backgroundColor = 'white'
|
||||
}
|
||||
|
||||
|
@ -183,7 +184,7 @@ function Generator({ getString }) {
|
|||
const [qrcode, setQrcode] = useState(null)
|
||||
const [qrcodeWorks, setQrcodeWorks] = useState(null)
|
||||
|
||||
const [backgroundColor, setBackgroundColor] = useState('purple')
|
||||
const [backgroundColor, setBackgroundColor] = useState('white')
|
||||
const [foregroundColor, setForegroundColor] = useState('purple')
|
||||
const [displayLogo, setDisplayLogo] = useState('yes')
|
||||
|
||||
|
@ -212,13 +213,22 @@ function Generator({ getString }) {
|
|||
}, [setContent])
|
||||
|
||||
useEffect(() => {
|
||||
let backgroundColor_to_use = backgroundColor
|
||||
if (backgroundColor_to_use === 'transparent') {
|
||||
if (foregroundColor === 'white') {
|
||||
backgroundColor_to_use = 'black'
|
||||
} else {
|
||||
backgroundColor_to_use = 'white'
|
||||
}
|
||||
}
|
||||
|
||||
async function checkQrcode(displayLogo, min_error_correction_level) {
|
||||
const errorCorrectionLevel = errorCorrectionLevels[min_error_correction_level]
|
||||
const { qrcode_svg, realCanvasSize } = generate_qr_code({
|
||||
content,
|
||||
size: 1000,
|
||||
errorCorrectionLevel,
|
||||
backgroundColor,
|
||||
backgroundColor: backgroundColor_to_use,
|
||||
foregroundColor,
|
||||
displayLogo,
|
||||
})
|
||||
|
@ -349,11 +359,11 @@ function Generator({ getString }) {
|
|||
title: getString(color)
|
||||
}))
|
||||
|
||||
let background_colors = ['purple', 'white', 'black'] // 'yellow', 'green', 'red', 'blue'
|
||||
let background_colors = ['purple', 'white', 'black', 'transparent'] // 'yellow', 'green', 'red', 'blue'
|
||||
if (foregroundColor !== 'white') {
|
||||
background_colors = ['white']
|
||||
background_colors = ['white', 'transparent']
|
||||
} else if (foregroundColor === 'white') {
|
||||
background_colors = ['purple', 'black'] // 'yellow', 'green', 'blue', 'red',
|
||||
background_colors = ['purple', 'black', 'transparent'] // 'yellow', 'green', 'blue', 'red',
|
||||
}
|
||||
background_colors = background_colors.map(color => ({
|
||||
value: color,
|
||||
|
@ -499,8 +509,12 @@ function Generator({ getString }) {
|
|||
|
||||
<h2><Localized id="download_headline" /></h2>
|
||||
<button onClick={handleDownload_svg} className={'green ' + classes.downloadButton}><Localized id="svg_label" /></button>
|
||||
<button onClick={handleDownload_jpeg} className={'green ' + classes.downloadButton}><Localized id="jpeg_label" /></button>
|
||||
<button onClick={handleDownload_png} className={'green ' + classes.downloadButton}><Localized id="png_label" /></button>
|
||||
{
|
||||
backgroundColor === 'transparent'
|
||||
? null
|
||||
: <button onClick={handleDownload_jpeg} className={'green ' + classes.downloadButton}><Localized id="jpeg_label" /></button>
|
||||
}
|
||||
</>
|
||||
: <p><strong><Localized id="error_qrcode_not_usable" /></strong></p>
|
||||
)
|
||||
|
|
|
@ -18,6 +18,12 @@
|
|||
width: 320px;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
|
||||
font-size: 0;
|
||||
|
||||
background-position: 0px 0px, 8px 8px;
|
||||
background-size: 16px 16px;
|
||||
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%), linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #ccc 100%);
|
||||
}
|
||||
.qrCodeSvgWrapper svg{
|
||||
max-width: 100%;
|
||||
|
|
Loading…
Reference in a new issue