mirror of
https://github.com/voltbonn/qrcode.volt.link.git
synced 2024-06-23 14:30:58 +00:00
Added colored QR-Codes and the Volt logo in the middle.
Also switched from qr-code-styling to the lib they use (qrcode-generator).
This commit is contained in:
thomasrosen
parent
725e7b9576
commit
aab01ff0bb
|
|
@ -11,9 +11,10 @@
|
|||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"canvg": "^3.0.7",
|
||||
"intl-pluralrules": "^1.2.2",
|
||||
"iso-639-1": "^2.1.9",
|
||||
"qr-code-styling": "^1.6.0-rc.0",
|
||||
"qrcode-generator": "^1.4.4",
|
||||
"react": "^17.0.2",
|
||||
"react-beautiful-dnd": "^13.1.0",
|
||||
"react-dom": "^17.0.2",
|
||||
|
|
|
|||
6
src/images/Volt_Logo.svg
Normal file
6
src/images/Volt_Logo.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="365" height="152" viewBox="0 0 365 152" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M321.335 102.556L321.335 62.9416L350.67 62.9416L350.67 36.4095L321.335 36.4095L321.335 0.649475L289.43 5.7056L289.43 102.99C289.43 110.266 290.097 116.907 291.465 122.898C292.817 128.888 295.203 133.994 298.641 138.199C302.061 142.404 306.634 145.692 312.341 148.045C318.047 150.398 325.256 151.582 333.967 151.582C340.825 151.582 346.599 151.015 351.304 149.864C356.01 148.729 360.299 147.36 364.153 145.792L359.648 120.962C356.644 122.113 353.34 122.998 349.686 123.632C346.048 124.266 342.51 124.6 339.09 124.6C331.948 124.6 327.209 122.597 324.856 118.609C322.503 114.621 321.335 109.264 321.335 102.556Z" fill="#502379"/>
|
||||
<path d="M92.0228 149.012C97.8966 136.614 103.704 123.699 109.411 110.282C115.117 96.866 120.541 83.5999 125.68 70.4674C130.82 57.3348 135.542 44.7863 139.881 32.8218C144.203 20.8239 148.024 10.1109 151.345 0.649476L115.785 0.649476C112.998 9.29328 109.894 18.5545 106.507 28.4498C103.103 38.3618 99.6487 48.2405 96.1278 58.069C92.6068 67.9143 89.186 77.3257 85.882 86.3366C82.578 95.3475 79.5243 103.107 76.7376 109.615C73.784 103.057 70.6803 95.2808 67.4597 86.2698C64.2225 77.2589 60.8517 67.8308 57.3308 58.0023C53.8098 48.1737 50.339 38.2951 46.9349 28.3998C43.5307 18.4877 40.4437 9.24322 37.6736 0.649475L0.845703 0.649475C3.99952 10.0609 7.73738 20.7738 12.076 32.7717C16.4146 44.7696 21.1536 57.3181 26.3266 70.434C31.4995 83.5499 36.9561 96.8159 42.6964 110.216C48.4367 123.615 54.2604 136.547 60.1675 149.012L92.0228 149.012Z" fill="#502379"/>
|
||||
<path d="M278.9 0.649475L246.995 5.7056L246.995 149.012L278.9 149.012L278.9 0.649475Z" fill="#502379"/>
|
||||
<path d="M238.084 94.1967C238.084 62.2747 212.202 36.3933 180.28 36.3933C167.114 36.3933 154.983 40.7987 145.271 48.191C142.568 55.4164 139.731 62.8254 136.744 70.4346C132.439 81.4145 127.95 92.5113 123.245 103.692C127.8 131.108 151.596 152 180.28 152C212.202 152 238.084 126.119 238.084 94.1967ZM209.149 94.1967C209.149 109.999 196.333 122.815 180.531 122.815C164.728 122.815 151.913 109.999 151.913 94.1967C151.913 78.3942 164.728 65.5787 180.531 65.5787C196.333 65.5787 209.149 78.3942 209.149 94.1967Z" fill="#502379"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
7
src/images/volt-logo-purple.svg
Normal file
7
src/images/volt-logo-purple.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="2083" height="2083" viewBox="0 0 2083 2083" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="2083" height="2083" rx="1041.5" fill="#502379"/>
|
||||
<path d="M1653.47 1157.13V982.509H1782.78V865.558H1653.47V707.932L1512.84 730.218V1159.04C1512.84 1191.11 1515.78 1220.38 1521.81 1246.79C1527.77 1273.2 1538.29 1295.7 1553.44 1314.24C1568.52 1332.77 1588.67 1347.26 1613.83 1357.64C1638.98 1368.01 1670.76 1373.23 1709.15 1373.23C1739.38 1373.23 1764.83 1370.73 1785.57 1365.65C1806.32 1360.65 1825.22 1354.62 1842.21 1347.71L1822.35 1238.26C1809.11 1243.33 1794.55 1247.23 1778.44 1250.03C1762.41 1252.82 1746.81 1254.29 1731.73 1254.29C1700.25 1254.29 1679.36 1245.47 1668.99 1227.89C1658.62 1210.31 1653.47 1186.7 1653.47 1157.13Z" fill="white"/>
|
||||
<path d="M642.687 1361.9C668.578 1307.25 694.175 1250.32 719.331 1191.18C744.486 1132.04 768.391 1073.57 791.046 1015.68C813.701 957.795 834.516 902.482 853.64 849.744C872.691 796.859 889.535 749.637 904.172 707.932H747.428C735.145 746.033 721.464 786.855 706.532 830.473C691.527 874.164 676.301 917.708 660.781 961.031C645.261 1004.43 630.183 1045.91 615.619 1085.63C601.055 1125.35 587.595 1159.55 575.311 1188.24C562.292 1159.33 548.611 1125.06 534.415 1085.34C520.146 1045.62 505.288 1004.06 489.768 960.737C474.248 917.414 458.949 873.87 443.944 830.252C428.939 786.561 415.331 745.812 403.121 707.932H240.787C254.689 749.416 271.165 796.638 290.289 849.523C309.413 902.409 330.303 957.722 353.104 1015.54C375.906 1073.35 399.958 1131.82 425.261 1190.89C450.564 1249.95 476.234 1306.96 502.272 1361.9H642.687Z" fill="white"/>
|
||||
<path d="M1466.41 707.932L1325.78 730.218V1361.9H1466.41V707.932Z" fill="white"/>
|
||||
<path d="M1286.51 1120.28C1286.51 979.568 1172.43 865.485 1031.72 865.485C973.684 865.485 920.211 884.904 877.402 917.488C865.486 949.337 852.982 981.995 839.816 1015.54C820.839 1063.93 801.053 1112.85 780.311 1162.13C800.391 1282.98 905.279 1375.07 1031.72 1375.07C1172.43 1375.07 1286.51 1260.99 1286.51 1120.28ZM1158.97 1120.28C1158.97 1189.93 1102.48 1246.42 1032.82 1246.42C963.166 1246.42 906.677 1189.93 906.677 1120.28C906.677 1050.62 963.166 994.131 1032.82 994.131C1102.48 994.131 1158.97 1050.62 1158.97 1120.28Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
7
src/images/volt-logo-white.svg
Normal file
7
src/images/volt-logo-white.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="2083" height="2083" viewBox="0 0 2083 2083" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="2083" height="2083" rx="1041.5" fill="white"/>
|
||||
<path d="M1653.47 1157.13V982.509H1782.78V865.558H1653.47V707.932L1512.84 730.219V1159.04C1512.84 1191.11 1515.78 1220.38 1521.81 1246.79C1527.77 1273.2 1538.29 1295.7 1553.44 1314.24C1568.52 1332.77 1588.67 1347.26 1613.83 1357.64C1638.98 1368.01 1670.76 1373.23 1709.15 1373.23C1739.38 1373.23 1764.83 1370.73 1785.57 1365.65C1806.32 1360.65 1825.22 1354.62 1842.21 1347.71L1822.35 1238.26C1809.11 1243.33 1794.55 1247.23 1778.44 1250.03C1762.41 1252.82 1746.81 1254.29 1731.73 1254.29C1700.25 1254.29 1679.36 1245.47 1668.99 1227.89C1658.62 1210.31 1653.47 1186.7 1653.47 1157.13Z" fill="#502379"/>
|
||||
<path d="M642.687 1361.9C668.578 1307.25 694.175 1250.32 719.331 1191.18C744.486 1132.05 768.391 1073.57 791.046 1015.68C813.701 957.795 834.516 902.482 853.64 849.744C872.691 796.859 889.535 749.637 904.172 707.932H747.428C735.145 746.033 721.464 786.855 706.532 830.473C691.527 874.164 676.301 917.708 660.781 961.032C645.261 1004.43 630.183 1045.91 615.619 1085.63C601.055 1125.35 587.595 1159.55 575.311 1188.24C562.292 1159.33 548.611 1125.06 534.415 1085.34C520.146 1045.62 505.288 1004.06 489.768 960.737C474.248 917.414 458.949 873.87 443.944 830.252C428.939 786.561 415.331 745.812 403.121 707.932H240.787C254.689 749.416 271.165 796.638 290.289 849.523C309.413 902.409 330.303 957.722 353.104 1015.54C375.906 1073.35 399.958 1131.82 425.261 1190.89C450.564 1249.95 476.234 1306.96 502.272 1361.9H642.687Z" fill="#502379"/>
|
||||
<path d="M1466.41 707.932L1325.78 730.219V1361.9H1466.41V707.932Z" fill="#502379"/>
|
||||
<path d="M1286.51 1120.28C1286.51 979.568 1172.43 865.485 1031.72 865.485C973.684 865.485 920.211 884.904 877.402 917.488C865.486 949.337 852.982 981.995 839.816 1015.54C820.839 1063.93 801.053 1112.85 780.311 1162.13C800.391 1282.98 905.279 1375.07 1031.72 1375.07C1172.43 1375.07 1286.51 1260.99 1286.51 1120.28ZM1158.97 1120.28C1158.97 1189.93 1102.48 1246.42 1032.82 1246.42C963.166 1246.42 906.677 1189.93 906.677 1120.28C906.677 1050.62 963.166 994.132 1032.82 994.132C1102.48 994.132 1158.97 1050.62 1158.97 1120.28Z" fill="#502379"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -8,4 +8,18 @@ source_code = Quellcode
|
|||
text_content_input_placeholder = https:// … oder Text
|
||||
|
||||
filetype_headline = Als Vektor (VSG) oder Pixel (PNG) laden
|
||||
size_headline = Größe der Pixel Graphiken
|
||||
|
||||
background_color_headline = Hintergrund Farbe
|
||||
foreground_color_headline = Fordergrund Farbe
|
||||
purple = Lila
|
||||
white = Weiß
|
||||
black = Schwarz
|
||||
yellow = Geld
|
||||
green = Grün
|
||||
blue = Blau
|
||||
red = Rot
|
||||
|
||||
display_logo_headline = Logo Wassermarke
|
||||
|
||||
error_correction_level_headline = Fehlerresistenz
|
||||
|
|
|
|||
|
|
@ -8,5 +8,19 @@ source_code = Source Code
|
|||
content_placeholder = https:// … or Text
|
||||
|
||||
filetype_headline = Choose between Vector (VSG) or Pixel (PNG) Image.
|
||||
size_headline = Size of the final pixel graphics
|
||||
|
||||
background_color_headline = Background Color
|
||||
foreground_color_headline = Foreground Color
|
||||
purple = Purple
|
||||
white = White
|
||||
black = Black
|
||||
yellow = Yellow
|
||||
green = Green
|
||||
blue = Blue
|
||||
red = Red
|
||||
|
||||
display_logo_headline = Display Logo
|
||||
|
||||
error_correction_level_headline = Error Resistance
|
||||
|
||||
|
|
|
|||
|
|
@ -1,68 +1,65 @@
|
|||
import React, { useState, useCallback, useEffect } from 'react'
|
||||
import React, { useState, useCallback, useEffect, useRef } from 'react'
|
||||
import classes from './Generator.module.css'
|
||||
|
||||
import { withLocalization, Localized } from '../fluent/Localized.js'
|
||||
import MultiButton from '../components/MultiButton.js'
|
||||
|
||||
import QRCodeStyling from 'qr-code-styling'
|
||||
import qrcode_generator from 'qrcode-generator'
|
||||
import Canvg from 'canvg'
|
||||
|
||||
const size = 1000
|
||||
|
||||
const qrCode = new QRCodeStyling({
|
||||
experimental: false,
|
||||
width: size,
|
||||
height: size,
|
||||
type: 'svg',
|
||||
image: '', // 'http://localhost:3000/volt-logo-white-192.png', // 'https://volt.link/volt-logo-white-192.png',
|
||||
dotsOptions: {
|
||||
color: '#502379',
|
||||
type: 'square'
|
||||
},
|
||||
backgroundOptions: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
margin: 50,
|
||||
qrOptions: {
|
||||
errorCorrectionLevel: 'M',
|
||||
},
|
||||
})
|
||||
|
||||
console.log('qrCode', qrCode)
|
||||
|
||||
// function trigger_download(name, data) {
|
||||
// const a = document.createElement('a')
|
||||
// document.body.appendChild(a)
|
||||
// // a.target = '_blank'
|
||||
// a.download = name
|
||||
// a.href = data
|
||||
// a.click()
|
||||
// a.remove()
|
||||
// }
|
||||
function trigger_download(name, data) {
|
||||
const a = document.createElement('a')
|
||||
document.body.appendChild(a)
|
||||
// a.target = '_blank'
|
||||
a.download = name
|
||||
a.href = data
|
||||
a.click()
|
||||
a.remove()
|
||||
}
|
||||
|
||||
// function getQrcodeBounds(svgText){
|
||||
// const matches = [...svgText.matchAll(/<rect x="([0-9]+)" y="([0-9]+)" width="([0-9]+)"/gm)]
|
||||
|
||||
//
|
||||
// const dot_size = Math.min(...matches.map(match => match[3]))
|
||||
|
||||
//
|
||||
// const x_all = matches.map(match => match[1])
|
||||
// const x_min = Math.min(...x_all)
|
||||
// const x_max = Math.max(...x_all) + dot_size - x_min
|
||||
|
||||
//
|
||||
// const y_all = matches.map(match => match[2])
|
||||
// const y_min = Math.min(...y_all)
|
||||
// const y_max = Math.max(...y_all) + dot_size - y_min
|
||||
|
||||
//
|
||||
// return { x_min, x_max, y_min, y_max, dot_size }
|
||||
// }
|
||||
|
||||
const colors = {
|
||||
'black': '#000000',
|
||||
'white': '#ffffff',
|
||||
'purple': '#502379',
|
||||
'yellow': '#FDC220',
|
||||
'green': '#1BBE6F',
|
||||
'blue': '#82D0F4',
|
||||
'red': '#E63E12',
|
||||
}
|
||||
|
||||
function Generator({ getString }) {
|
||||
const conversion_canvas_ref = useRef(null)
|
||||
|
||||
const [size, setSize] = useState('1000')
|
||||
const [realSize, setRealSize] = useState(null)
|
||||
|
||||
const [errorCorrectionLevel, setErrorCorrectionLevel] = useState('M')
|
||||
const [content, setContent] = useState('')
|
||||
const [qrcode, setQrcode] = useState(null)
|
||||
|
||||
const [backgroundColor, setBackgroundColor] = useState('white')
|
||||
const [foregroundColor, setForegroundColor] = useState('purple')
|
||||
const [displayLogo, setDisplayLogo] = useState('yes')
|
||||
|
||||
const handleContentChange = useCallback(event => {
|
||||
const value = event.target.value
|
||||
if (value.length > 0 && value.length < 1000) { // todo: find out the actual value length limit
|
||||
if (value.length > 0 && value.length < 1200) { // 1273 is the maximum for an ECL of H. 2953 for L.
|
||||
setContent(value)
|
||||
} else {
|
||||
setContent('')
|
||||
|
|
@ -70,68 +67,219 @@ function Generator({ getString }) {
|
|||
}, [setContent])
|
||||
|
||||
useEffect(() => {
|
||||
qrCode.update({
|
||||
data: content,
|
||||
qrOptions: {
|
||||
errorCorrectionLevel
|
||||
},
|
||||
})
|
||||
|
||||
if (content === '') {
|
||||
setQrcode(null)
|
||||
} else {
|
||||
qrCode.getRawData('svg')
|
||||
.then(async data => {
|
||||
let svg = await data.text()
|
||||
// generate qr code
|
||||
const size_int = parseInt(size)
|
||||
|
||||
// const { x_min, x_max, y_min, y_max } = getQrcodeBounds(svg)
|
||||
const qr = qrcode_generator(0, errorCorrectionLevel)
|
||||
qr.addData(content)
|
||||
qr.make()
|
||||
|
||||
svg = svg.replace('<svg', `<svg viewBox="0 0 ${size} ${size}"`)
|
||||
// svg = svg.replace('<svg', `<svg viewBox="${x_min} ${y_min} ${x_max} ${y_max}"`)
|
||||
setQrcode(svg)
|
||||
})
|
||||
const qr_pixel_count = qr.getModuleCount()
|
||||
const cellSize = Math.ceil(size_int / qr_pixel_count)
|
||||
|
||||
let svg = qr.createSvgTag({
|
||||
cellSize: cellSize,
|
||||
margin: cellSize * 1,
|
||||
scalable: true,
|
||||
})
|
||||
|
||||
const realCanvasSize = (
|
||||
(qr_pixel_count * cellSize) // qrcode without margin
|
||||
+ (cellSize * 2) // margin
|
||||
)
|
||||
setRealSize(realCanvasSize)
|
||||
|
||||
|
||||
// Volt Logo
|
||||
if (displayLogo === 'yes') {
|
||||
const logo_size = size_int * 0.4 // cellSize * 7
|
||||
const logo_pos = (
|
||||
realCanvasSize
|
||||
* 0.5 // middle of the image
|
||||
)
|
||||
- (logo_size * 0.5) // half logo, to position it at the center
|
||||
|
||||
svg = svg.replace('</svg>', `
|
||||
<svg x="${logo_pos}" y="${logo_pos}" width="${logo_size}" height="${logo_size}" viewBox="0 0 2083 2083" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="2083" height="2083" rx="1041.5" fill="logo_bg"/>
|
||||
<path d="M1653.47 1157.13V982.509H1782.78V865.558H1653.47V707.932L1512.84 730.219V1159.04C1512.84 1191.11 1515.78 1220.38 1521.81 1246.79C1527.77 1273.2 1538.29 1295.7 1553.44 1314.24C1568.52 1332.77 1588.67 1347.26 1613.83 1357.64C1638.98 1368.01 1670.76 1373.23 1709.15 1373.23C1739.38 1373.23 1764.83 1370.73 1785.57 1365.65C1806.32 1360.65 1825.22 1354.62 1842.21 1347.71L1822.35 1238.26C1809.11 1243.33 1794.55 1247.23 1778.44 1250.03C1762.41 1252.82 1746.81 1254.29 1731.73 1254.29C1700.25 1254.29 1679.36 1245.47 1668.99 1227.89C1658.62 1210.31 1653.47 1186.7 1653.47 1157.13Z" fill="logo_fg"/>
|
||||
<path d="M642.687 1361.9C668.578 1307.25 694.175 1250.32 719.331 1191.18C744.486 1132.05 768.391 1073.57 791.046 1015.68C813.701 957.795 834.516 902.482 853.64 849.744C872.691 796.859 889.535 749.637 904.172 707.932H747.428C735.145 746.033 721.464 786.855 706.532 830.473C691.527 874.164 676.301 917.708 660.781 961.032C645.261 1004.43 630.183 1045.91 615.619 1085.63C601.055 1125.35 587.595 1159.55 575.311 1188.24C562.292 1159.33 548.611 1125.06 534.415 1085.34C520.146 1045.62 505.288 1004.06 489.768 960.737C474.248 917.414 458.949 873.87 443.944 830.252C428.939 786.561 415.331 745.812 403.121 707.932H240.787C254.689 749.416 271.165 796.638 290.289 849.523C309.413 902.409 330.303 957.722 353.104 1015.54C375.906 1073.35 399.958 1131.82 425.261 1190.89C450.564 1249.95 476.234 1306.96 502.272 1361.9H642.687Z" fill="logo_fg"/>
|
||||
<path d="M1466.41 707.932L1325.78 730.219V1361.9H1466.41V707.932Z" fill="logo_fg"/>
|
||||
<path d="M1286.51 1120.28C1286.51 979.568 1172.43 865.485 1031.72 865.485C973.684 865.485 920.211 884.904 877.402 917.488C865.486 949.337 852.982 981.995 839.816 1015.54C820.839 1063.93 801.053 1112.85 780.311 1162.13C800.391 1282.98 905.279 1375.07 1031.72 1375.07C1172.43 1375.07 1286.51 1260.99 1286.51 1120.28ZM1158.97 1120.28C1158.97 1189.93 1102.48 1246.42 1032.82 1246.42C963.166 1246.42 906.677 1189.93 906.677 1120.28C906.677 1050.62 963.166 994.132 1032.82 994.132C1102.48 994.132 1158.97 1050.62 1158.97 1120.28Z" fill="logo_fg"/>
|
||||
</svg>
|
||||
</svg>
|
||||
`)
|
||||
}
|
||||
|
||||
// Colors
|
||||
let this_backgroundColor = backgroundColor
|
||||
let this_foregroundColor = foregroundColor
|
||||
|
||||
if (
|
||||
this_foregroundColor === this_backgroundColor
|
||||
) {
|
||||
if (this_backgroundColor === 'white') {
|
||||
this_foregroundColor = 'purple'
|
||||
} else {
|
||||
this_backgroundColor = 'white'
|
||||
}
|
||||
}
|
||||
|
||||
if (this_foregroundColor !== 'white') {
|
||||
this_backgroundColor = 'white'
|
||||
}
|
||||
|
||||
let this_backgroundColor_logo = 'white'
|
||||
let this_foregroundColor_logo = 'purple'
|
||||
|
||||
if (this_backgroundColor === 'purple' && this_foregroundColor === 'white') {
|
||||
this_backgroundColor_logo = 'purple'
|
||||
this_foregroundColor_logo = 'white'
|
||||
}
|
||||
|
||||
let backgroundColor_hex = colors[this_backgroundColor] || 'white'
|
||||
let foregroundColor_hex = colors[this_foregroundColor] || 'black'
|
||||
let backgroundColor_logo_hex = colors[this_backgroundColor_logo] || 'white'
|
||||
let foregroundColor_logo_hex = colors[this_foregroundColor_logo] || 'black'
|
||||
|
||||
svg = svg
|
||||
.replace(/fill="black"/g, `fill="${foregroundColor_hex}"`)
|
||||
.replace(/fill="white"/g, `fill="${backgroundColor_hex}"`)
|
||||
.replace(/fill="logo_bg"/g, `fill="${backgroundColor_logo_hex}"`)
|
||||
.replace(/fill="logo_fg"/g, `fill="${foregroundColor_logo_hex}"`)
|
||||
|
||||
|
||||
// use the qrcode
|
||||
setQrcode(svg)
|
||||
}
|
||||
}, [content, errorCorrectionLevel, setQrcode])
|
||||
|
||||
// const handleDownload = useCallback(() => {
|
||||
// if (filetype === 'svg') {
|
||||
// const b64 = 'data:image/svg+xml;base64,' + btoa(qrcode)
|
||||
// trigger_download('volt-qrcode.svg', b64)
|
||||
// } else {
|
||||
// const b64 = 'data:image/png;base64,'
|
||||
// trigger_download('volt-qrcode.png', b64)
|
||||
// }
|
||||
// // window.umami.trackEvent('F: ' + filetype)
|
||||
// }, [
|
||||
// filetype,
|
||||
// qrcode
|
||||
// ])
|
||||
}, [content, size, errorCorrectionLevel, backgroundColor, foregroundColor, displayLogo, setRealSize, setQrcode])
|
||||
|
||||
const handleDownload_svg = () => {
|
||||
qrCode.download({ name: 'volt-qrcode', extension: 'svg' })
|
||||
const b64 = 'data:image/svg+xml;base64,' + btoa(qrcode)
|
||||
trigger_download('volt-qrcode.svg', b64)
|
||||
window.umami.trackEvent('E: svg')
|
||||
}
|
||||
const handleDownload_jpeg = () => {
|
||||
qrCode.download({ name: 'volt-qrcode', extension: 'jpeg' })
|
||||
const handleDownload_jpeg = async () => {
|
||||
var canvas = conversion_canvas_ref.current
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
const v = Canvg.fromString(ctx, qrcode)
|
||||
v.resize(realSize, realSize)
|
||||
await v.render()
|
||||
|
||||
var b64 = canvas.toDataURL('image/jpeg')
|
||||
|
||||
trigger_download('volt-qrcode.jpeg', b64)
|
||||
window.umami.trackEvent('E: jpeg')
|
||||
}
|
||||
const handleDownload_png = () => {
|
||||
qrCode.download({ name: 'volt-qrcode', extension: 'png' })
|
||||
const handleDownload_png = async () => {
|
||||
var canvas = conversion_canvas_ref.current
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
const v = Canvg.fromString(ctx, qrcode)
|
||||
v.resize(realSize, realSize)
|
||||
await v.render()
|
||||
|
||||
var b64 = canvas.toDataURL('image/png')
|
||||
|
||||
trigger_download('volt-qrcode.png', b64)
|
||||
window.umami.trackEvent('E: png')
|
||||
}
|
||||
// const handleDownload_webp = () => {
|
||||
// qrCode.download({ name: 'volt-qrcode', extension: 'webp' })
|
||||
// window.umami.trackEvent('E: webp')
|
||||
// }
|
||||
|
||||
return <div className={classes.qrcodeWrapper}>
|
||||
<h1><Localized id="website_title" /></h1>
|
||||
|
||||
<textarea
|
||||
className={classes.qrcodeContentInput}
|
||||
placeholder={getString('text_content_input_placeholder')}
|
||||
onChange={handleContentChange}
|
||||
></textarea>
|
||||
|
||||
let background_colors = ['purple', 'white', 'yellow', 'green', 'blue', 'red', 'black']
|
||||
if (foregroundColor !== 'white') {
|
||||
background_colors = ['white']
|
||||
} else if (foregroundColor === 'white') {
|
||||
background_colors = ['purple', 'yellow', 'green', 'blue', 'red', 'black']
|
||||
}
|
||||
background_colors = background_colors.map(color => ({
|
||||
value: color,
|
||||
title: getString(color)
|
||||
}))
|
||||
|
||||
|
||||
const options = <>
|
||||
<h2>
|
||||
<Localized id="foreground_color_headline" />
|
||||
</h2>
|
||||
<MultiButton
|
||||
onChange={setForegroundColor}
|
||||
ariaLabel={getString('foreground_color_headline')}
|
||||
defaultValue={foregroundColor}
|
||||
items={[
|
||||
{
|
||||
value: 'purple',
|
||||
title: getString('purple')
|
||||
},
|
||||
{
|
||||
value: 'white',
|
||||
title: getString('white')
|
||||
},
|
||||
{
|
||||
value: 'yellow',
|
||||
title: getString('yellow')
|
||||
},
|
||||
{
|
||||
value: 'green',
|
||||
title: getString('green')
|
||||
},
|
||||
{
|
||||
value: 'blue',
|
||||
title: getString('blue')
|
||||
},
|
||||
{
|
||||
value: 'red',
|
||||
title: getString('red')
|
||||
},
|
||||
{
|
||||
value: 'black',
|
||||
title: getString('black')
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
|
||||
{
|
||||
background_colors.length <= 1
|
||||
? null
|
||||
: <>
|
||||
<h2>
|
||||
<Localized id="background_color_headline" />
|
||||
</h2>
|
||||
<MultiButton
|
||||
onChange={setBackgroundColor}
|
||||
ariaLabel={getString('background_color_headline')}
|
||||
defaultValue={backgroundColor}
|
||||
items={background_colors}
|
||||
/>
|
||||
<br />
|
||||
</>
|
||||
}
|
||||
|
||||
<h2>
|
||||
<Localized id="display_logo_headline" />
|
||||
</h2>
|
||||
<MultiButton
|
||||
onChange={setDisplayLogo}
|
||||
ariaLabel={getString('display_logo_headline')}
|
||||
defaultValue={displayLogo}
|
||||
items={[
|
||||
{
|
||||
value: 'yes',
|
||||
title: 'Yes'
|
||||
},
|
||||
{
|
||||
value: 'no',
|
||||
title: 'No'
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
|
||||
<h2>
|
||||
<Localized id="error_correction_level_headline" />
|
||||
|
|
@ -160,11 +308,58 @@ function Generator({ getString }) {
|
|||
]}
|
||||
/>
|
||||
<br />
|
||||
|
||||
<h2>
|
||||
<Localized id="size_headline" />
|
||||
</h2>
|
||||
<MultiButton
|
||||
onChange={setSize}
|
||||
ariaLabel={getString('size_headline')}
|
||||
defaultValue={size}
|
||||
items={[
|
||||
{
|
||||
value: '500',
|
||||
title: '500px'
|
||||
},
|
||||
{
|
||||
value: '1000',
|
||||
title: '1000px'
|
||||
},
|
||||
{
|
||||
value: '2000',
|
||||
title: '2000px'
|
||||
},
|
||||
{
|
||||
value: '4000',
|
||||
title: '4000px'
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
|
||||
return <div className={classes.qrcodeWrapper}>
|
||||
<h1><Localized id="website_title" /></h1>
|
||||
<br />
|
||||
|
||||
<p>Enter a URL or other text.</p>
|
||||
<textarea
|
||||
className={classes.qrcodeContentInput}
|
||||
placeholder={getString('text_content_input_placeholder')}
|
||||
onChange={handleContentChange}
|
||||
style={{marginTop: '0'}}
|
||||
></textarea>
|
||||
|
||||
{
|
||||
content.length > 0
|
||||
? options
|
||||
: null
|
||||
}
|
||||
|
||||
{
|
||||
qrcode === null
|
||||
? <p>Enter content for the QR-Code to download it.</p>
|
||||
? null
|
||||
: <>
|
||||
<span className={classes.qrCodeSvgWrapper} dangerouslySetInnerHTML={{ __html: qrcode }}></span>
|
||||
|
||||
|
|
@ -172,9 +367,10 @@ function Generator({ getString }) {
|
|||
<button onClick={handleDownload_svg} className={'green ' + classes.downloadButton}>SVG</button>
|
||||
<button onClick={handleDownload_jpeg} className={'green ' + classes.downloadButton}>JPEG</button>
|
||||
<button onClick={handleDownload_png} className={'green ' + classes.downloadButton}>PNG</button>
|
||||
{/* <button onClick={handleDownload_webp} className={'green ' + classes.downloadButton}>WEBP</button> */}
|
||||
</>
|
||||
}
|
||||
|
||||
<canvas style={{display:'none'}} ref={conversion_canvas_ref} />
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
43
yarn.lock
43
yarn.lock
|
|
@ -1142,7 +1142,7 @@
|
|||
"@babel/helper-plugin-utils" "^7.10.4"
|
||||
"@babel/plugin-transform-typescript" "^7.12.1"
|
||||
|
||||
"@babel/runtime-corejs3@^7.10.2":
|
||||
"@babel/runtime-corejs3@^7.10.2", "@babel/runtime-corejs3@^7.9.6":
|
||||
version "7.14.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz#0ef292bbce40ca00f874c9724ef175a12476465c"
|
||||
integrity sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==
|
||||
|
|
@ -1952,6 +1952,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
|
||||
integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
|
||||
|
||||
"@types/raf@^3.4.0":
|
||||
version "3.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/raf/-/raf-3.4.0.tgz#2b72cbd55405e071f1c4d29992638e022b20acc2"
|
||||
integrity sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==
|
||||
|
||||
"@types/react-redux@^7.1.16":
|
||||
version "7.1.16"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
|
||||
|
|
@ -3298,6 +3303,18 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, can
|
|||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001241.tgz#cd3fae47eb3d7691692b406568d7a3e5b23c7598"
|
||||
integrity sha512-1uoSZ1Pq1VpH0WerIMqwptXHNNGfdl7d1cJUFs80CwQ/lVzdhTvsFZCeNFslze7AjsQnb4C85tzclPa1VShbeQ==
|
||||
|
||||
canvg@^3.0.7:
|
||||
version "3.0.7"
|
||||
resolved "https://registry.yarnpkg.com/canvg/-/canvg-3.0.7.tgz#e45b87a64116af906917f7cad57d370ea372d682"
|
||||
integrity sha512-4sq6iL5Q4VOXS3PL1BapiXIZItpxYyANVzsAKpTPS5oq4u3SKbGfUcbZh2gdLCQ3jWpG/y5wRkMlBBAJhXeiZA==
|
||||
dependencies:
|
||||
"@babel/runtime-corejs3" "^7.9.6"
|
||||
"@types/raf" "^3.4.0"
|
||||
raf "^3.4.1"
|
||||
rgbcolor "^1.0.1"
|
||||
stackblur-canvas "^2.0.0"
|
||||
svg-pathdata "^5.0.5"
|
||||
|
||||
capture-exit@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
|
||||
|
|
@ -9225,14 +9242,7 @@ q@^1.1.2:
|
|||
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
|
||||
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
|
||||
|
||||
qr-code-styling@^1.6.0-rc.0:
|
||||
version "1.6.0-rc.0"
|
||||
resolved "https://registry.yarnpkg.com/qr-code-styling/-/qr-code-styling-1.6.0-rc.0.tgz#e9ddace6675b519731bc6b24c3e56658672d1507"
|
||||
integrity sha512-Q0WKtSgL3WHzc4SGS/7IVBvlkSlkSbK+guxnH87mRPsxijTP5yJN5KzN0Qw/Bx9W9atZawa+q2IyZVyYgbwtFA==
|
||||
dependencies:
|
||||
qrcode-generator "^1.4.3"
|
||||
|
||||
qrcode-generator@^1.4.3:
|
||||
qrcode-generator@^1.4.4:
|
||||
version "1.4.4"
|
||||
resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
|
||||
integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==
|
||||
|
|
@ -9882,6 +9892,11 @@ rgba-regex@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
|
||||
integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
|
||||
|
||||
rgbcolor@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/rgbcolor/-/rgbcolor-1.0.1.tgz#d6505ecdb304a6595da26fa4b43307306775945d"
|
||||
integrity sha1-1lBezbMEplldom+ktDMHMGd1lF0=
|
||||
|
||||
rimraf@^2.5.4, rimraf@^2.6.3:
|
||||
version "2.7.1"
|
||||
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
|
||||
|
|
@ -10497,6 +10512,11 @@ stack-utils@^2.0.2:
|
|||
dependencies:
|
||||
escape-string-regexp "^2.0.0"
|
||||
|
||||
stackblur-canvas@^2.0.0:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.yarnpkg.com/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz#aa87bbed1560fdcd3138fff344fc6a1c413ebac4"
|
||||
integrity sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==
|
||||
|
||||
stackframe@^1.1.1:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
|
||||
|
|
@ -10748,6 +10768,11 @@ svg-parser@^2.0.2:
|
|||
resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
|
||||
integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
|
||||
|
||||
svg-pathdata@^5.0.5:
|
||||
version "5.0.5"
|
||||
resolved "https://registry.yarnpkg.com/svg-pathdata/-/svg-pathdata-5.0.5.tgz#65e8d765642ba15fe15434444087d082bc526b29"
|
||||
integrity sha512-TAAvLNSE3fEhyl/Da19JWfMAdhSXTYeviXsLSoDT1UM76ADj5ndwAPX1FKQEgB/gFMPavOy6tOqfalXKUiXrow==
|
||||
|
||||
svgo@^1.0.0, svgo@^1.2.2:
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
|
||||
|
|
|
|||
Loading…
Reference in a new issue