|
1 | | -import { MESSAGE } from 'npm-template/consts.js'; |
2 | | -console.log(import.meta); |
3 | | -console.info(MESSAGE); |
| 1 | +import encodeQR from 'qr'; |
| 2 | +const namespace = 'http://www.w3.org/2000/svg'; |
| 3 | + |
| 4 | +const SANITIZER = { |
| 5 | + allowElements: [ |
| 6 | + { name: 'svg', namespace }, |
| 7 | + { name: 'path', namespace }, |
| 8 | + { name: 'rect', namespace }], |
| 9 | + allowAttributes: { |
| 10 | + 'viewBox': ['svg'], |
| 11 | + 'xmlns': ['svg'], |
| 12 | + 'd': ['path'], |
| 13 | + 'fill': ['svg', 'rect'], |
| 14 | + 'x': ['rect'], |
| 15 | + 'y': ['rect'], |
| 16 | + 'width': ['*'], |
| 17 | + 'height': ['*'], |
| 18 | + } |
| 19 | +}; |
| 20 | +const ECC = 'medium'; |
| 21 | +const BORDER = 4; |
| 22 | +const SCALE = 4; |
| 23 | +const GIF = 'gif'; |
| 24 | +const SVG = 'svg'; |
| 25 | +const FILL = '#000'; |
| 26 | +const BACKGROUND = '#fff'; |
| 27 | +const SIZE = 480; |
| 28 | + |
| 29 | +const attr = str => { |
| 30 | + return String(str ?? '').replace(/[&<>"']/g, (char) => ({ |
| 31 | + '&': '&', |
| 32 | + '<': '<', |
| 33 | + '>': '>', |
| 34 | + '"': '"', |
| 35 | + '\'': ''' |
| 36 | + }[char])); |
| 37 | +}; |
| 38 | + |
| 39 | +export function createGIF(input, { |
| 40 | + ecc = ECC, |
| 41 | + border = BORDER, |
| 42 | + scale = SCALE, |
| 43 | +} = {}) { |
| 44 | + return encodeQR(input, GIF, { ecc, border, scale }); |
| 45 | +} |
| 46 | + |
| 47 | +export const createGIFBlob = (input, { |
| 48 | + ecc = ECC, |
| 49 | + border = BORDER, |
| 50 | + scale = SCALE, |
| 51 | +} = {}) => new Blob([createGIF(input, { ecc, border, scale })], { type: 'image/gif' }); |
| 52 | + |
| 53 | +export const createGIFFile = (input, name = 'qr.gif', { |
| 54 | + ecc = ECC, |
| 55 | + border = BORDER, |
| 56 | + scale = SCALE, |
| 57 | +} = {}) => new File([createGIF(input, { ecc, border, scale })], name, { type: 'image/gif' }); |
| 58 | + |
| 59 | +export function createSVGString(input, { |
| 60 | + ecc = ECC, |
| 61 | + border = BORDER, |
| 62 | + scale = SCALE, |
| 63 | + size = SIZE, |
| 64 | + fill = FILL, |
| 65 | + background = BACKGROUND |
| 66 | +} = {}) { |
| 67 | + const s = attr(size); |
| 68 | + |
| 69 | + return encodeQR(input, SVG, { ecc, border, scale }) |
| 70 | + .replace('<svg ', `<svg fill="${attr(fill)}" height="${s}" width="${s}" `) |
| 71 | + .replace(/(<svg[^>]*>)/i, `$1\n\t<rect x="0" y="0" fill="${attr(background)}" height="100%" width="100%" />\n`); |
| 72 | +} |
| 73 | + |
| 74 | +export const createSVGBlob = (input, { |
| 75 | + ecc = ECC, |
| 76 | + border = BORDER, |
| 77 | + scale = SCALE, |
| 78 | + fill = FILL, |
| 79 | + background = BACKGROUND, |
| 80 | + size = SIZE, |
| 81 | +} = {}) => new Blob([createSVGString(input, { ecc, border, scale, fill, background, size })], { type: 'image/svg+xml' }); |
| 82 | + |
| 83 | +export const createSVGFile = (input, name = 'qr.svg', { |
| 84 | + ecc = ECC, |
| 85 | + border = BORDER, |
| 86 | + scale = SCALE, |
| 87 | + fill = FILL, |
| 88 | + background = BACKGROUND, |
| 89 | + size = SIZE, |
| 90 | +} = {}) => new File([createSVGString(input, { ecc, border, scale, fill, background, size })], name, { type: 'image/svg+xml' }); |
| 91 | + |
| 92 | +export function createSVGElement(input, { |
| 93 | + ecc = ECC, |
| 94 | + border = BORDER, |
| 95 | + scale = SCALE, |
| 96 | + fill = FILL, |
| 97 | + background = BACKGROUND, |
| 98 | + size = SIZE, |
| 99 | +} = {}) { |
| 100 | + // eslint-disable-next-line no-undef |
| 101 | + const el = document.createElement('div'); |
| 102 | + el.setHTML( |
| 103 | + createSVGString(input, { ecc, border, scale, fill, background, size }), |
| 104 | + { sanitizer: SANITIZER } |
| 105 | + ); |
| 106 | + return el.firstElementChild; |
| 107 | +} |
0 commit comments