2b:null 2c:["$","title",null,{"children":"Creating Branded transparent QR Codes | Máté Homolya | Observable"}] 31:Te29,{ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("viewBox", "0 0 1 1"); const padding = 0; svg.style.width = `${pixelSize - padding}px`; svg.style.height = `${pixelSize - padding}px`; // corner dot size const cornerSize = 8; const row = Array.from(table.getElementsByTagName("tr")[0].childNodes); const arr = Array.from(table.getElementsByTagName("td")); const size = row.length; let ctx = blackLookup.getContext("2d"); let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const blackData = imageData.data; ctx = colorLookup.getContext("2d"); imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; function colorAt(d, xx, yy) { const idx = Math.floor(yy * pixelSize + xx); const color = [d[idx * 4], d[idx * 4 + 1], d[idx * 4 + 2], d[idx * 4 + 3]]; return new ColorRGB(...color.map((c) => c / 255)); } for (let i = 0; i < arr.length; i++) { const x = i % size; const y = Math.floor(i / size); const topLeft = x < cornerSize && y < cornerSize; const topRight = x >= size - cornerSize && y < cornerSize; const bottomLeft = x < cornerSize && y >= size - cornerSize; if (!(topLeft || topRight || bottomLeft)) { // generate the transparent svg let isBlack = arr[i].style.backgroundColor === "rgb(0, 0, 0)"; if (invertCode.length) isBlack = !isBlack; // sample the color of the pixels array at x, y coordinate const o = pixelSize / size / 2; let xx = Math.floor((x / size) * pixelSize + o); let yy = Math.floor((y / size) * pixelSize + o); let blackColor = colorAt(blackData, xx, yy); let bgColor = colorAt(data, xx, yy); // figure out the color of the dot based on isBlack const isBlackDot = blackColor.R === 0 && blackColor.G === 0 && blackColor.B === 0; let g; const palette = generate(bgColor.toString()); const originalShade = palette.find((c) => c.equals(bgColor)); const currentShade = originalShade.meta.shade; let darkest = palette .filter((c) => c.meta.shade >= currentShade) .find((shade) => contrast(shade.toString(), "#ffffff") > minContrast); if (!darkest) darkest = ColorRGB.fromString("#000000"); let lightest = palette //.filter((c) => c.meta.shade <= currentShade) //.concat() //.reverse() .find((shade) => contrast(shade.toString(), "#000000") > minContrast); if (!lightest) lightest = ColorRGB.fromString("#ffffff"); if (isBlack) { g = svgPattern(darkest.toString()); } else if (!isBlack) { g = svgPattern(lightest.toString()); } if (whiteDots.length && !isBlack) { g = svgPattern("white"); } if (blackWhite.length) { g = svgPattern(isBlack ? "black" : "white"); } g.setAttribute("transform", `scale(${1 / size}) translate(${x}, ${y})`); svg.appendChild(g); } } // add svg corner elements svg.appendChild(getCorner(0)); svg.appendChild(getCorner(1)); svg.appendChild(getCorner(2)); svg.style.position = "absolute"; svg.style.top = "0"; svg.style.left = "0"; svg.style.padding = `${padding / 2}px`; const canvasNew = document.createElement("canvas"); await drawImage(canvasNew); const bgUrl = await inputImage.url(); let style = `position: relative; height: ${pixelSize}px; overflow: hidden; user-select: none;`; let style2 = `width: ${pixelSize}px; opacity: 1;`; return htl.html`

${canvasNew} ${svg}

`; }32:T70d,function getCorner(idx) { const cornerSize = 8; const row = Array.from(table.getElementsByTagName("tr")[0].childNodes); const size = row.length; let ox = 0; let oy = 0; let oox = 0; let ooy = 0; if (idx === 1) { oy = size - cornerSize; ooy = 1; } if (idx === 2) { ox = size - cornerSize; oox = 1; } const unit = 1 / size; const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", unit * ox); rect.setAttribute("y", unit * oy); rect.setAttribute("width", unit * cornerSize); rect.setAttribute("height", unit * cornerSize); rect.setAttribute("fill", backColor.toString()); // inner rects const rect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect2.setAttribute("x", unit * (ox + oox)); rect2.setAttribute("y", unit * (oy + ooy)); rect2.setAttribute("width", unit * 7); rect2.setAttribute("height", unit * 7); rect2.setAttribute("fill", ringColor.toString()); const rect3 = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect3.setAttribute("x", unit * (1 + ox + oox)); rect3.setAttribute("y", unit * (1 + oy + ooy)); rect3.setAttribute("width", unit * 5); rect3.setAttribute("height", unit * 5); rect3.setAttribute("fill", backColor.toString()); const rect4 = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect4.setAttribute("x", unit * (2 + ox + oox)); rect4.setAttribute("y", unit * (2 + oy + ooy)); rect4.setAttribute("width", unit * 3); rect4.setAttribute("height", unit * 3); rect4.setAttribute("fill", dotColor.toString()); g.appendChild(rect); g.appendChild(rect2); g.appendChild(rect3); g.appendChild(rect4); return g; }33:T739,getLookup = (black = false) => { const canvas2 = document.createElement("canvas"); canvas2.width = pixelSize; canvas2.height = pixelSize; const ctx2 = canvas2.getContext("2d"); const ctx = canvas.getContext("2d"); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; const row = Array.from(table.getElementsByTagName("tr")[0].childNodes); const arr = Array.from(table.getElementsByTagName("td")); let x = 0; let y = 0; const size = row.length; function findColor(cx, cy) { function colorAt(xx, yy) { const idx = Math.floor(yy * pixelSize + xx); return new ColorRGB( data[idx * 4] / 255, data[idx * 4 + 1] / 255, data[idx * 4 + 2] / 255, data[idx * 4 + 3] / 255 ); } function validColor(xx, yy) { let color = colorAt(xx, yy); // if it is in the valid colors function distance(cc) { const [r, g, b] = cc.toTuple(); const a = Math.abs; return a(cc.R - color.R) + a(g - color[1]) + a(b - color[2]); } return validColors.sort((a, b) => { const da = a.distance(color); const db = b.distance(color); return da - db; })[0]; } if (black) { const centerColorAt = colorAt(cx, cy); // assume bg to white let color = colorAt(cx, cy); if (color[3] === 0) { return "black"; } const isWhite = isWhiteText(centerColorAt); return isWhite ? "white" : "black"; } // color matching return validColor(cx, cy); } // for each pixel for (let i = 0; i < pixelSize * pixelSize; i++) { const x = i % pixelSize; const y = Math.floor(i / pixelSize); const color = findColor(x, y); ctx2.fillStyle = color; ctx2.fillRect(x, y, 1, 1); } return canvas2; }34:[{"id":"407c5d837419074120c2a470e77d19bfffa45c78a7e63f1b583bf51e081815d959a1af1b50b9688b6ca835239860909c2e385b2f744dbdd9aec093e8a4ee0bff","href":"https://static.observableusercontent.com/files/407c5d837419074120c2a470e77d19bfffa45c78a7e63f1b583bf51e081815d959a1af1b50b9688b6ca835239860909c2e385b2f744dbdd9aec093e8a4ee0bff","name":"apbc-qr.png","type":"image/png","lastModified":1652806077903.36,"size":126215}] 2f:{"id":"0b5029210beb0362","slug":"branded-qrcode","title":"Creating Branded transparent QR Codes","thumbnail":"6e8bd4f06230c100e5dfd12edd2b2fb9c28f674baa87f46015c7b379a05dc1cc","access_level":"public","create_time":"$D2022-05-16T21:49:55.629Z","update_time":"$D2022-08-22T22:35:51.325Z","view_time":null,"first_public_time":"$D2024-01-03T21:06:05.902Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":977,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"f6b25cd4ac57221b","login":"f6b25cd4ac57221b","name":"Craig Chapman","avatar_url":"https://avatars-next.observableusercontent.com/37a4233ffd50be8da4945454209cb38194f2f056204453dc736ec324b957b329","tier":null,"role":"editor"},{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"},{"type":"individual","id":"562725bd1b17d11a","login":"yohophotography","name":"Craig Chapman","avatar_url":"https://avatars-next.observableusercontent.com/ec56190326ffb9e66ddbd20cef7929372a9849bb2825e4b980b2d113f950ff00","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Creating Branded transparent QR Codes","cells":[{"id":0,"value":"# Creating Branded transparent QR Codes\n\nIn this notebook I will be describing how to algorithmically generate transparent QR codes with an image in the background. This method works best for illustrations, logos because of the solid colors in the image.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":98,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":727,"value":"viewof inputImage = Inputs.file({\n label: \"Image file\",\n accept: \".png,.jpg\",\n required: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"viewof pixelSize = Inputs.range([0, 500], {\n value: 350,\n step: 1,\n label: \"Size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"viewof qrData = Inputs.text({\n value: \"instagram.com/rickandmorty\",\n label: \"Data\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":818,"value":"### Colors\n\nCorner ring color, corner square color and background color for the corner elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":943,"value":"viewof whiteDots = Inputs.checkbox([\"\"], { label: \"White dots\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":956,"value":"viewof invertCode = Inputs.checkbox([\"\"], { label: \"Invert\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"viewof minContrast = Inputs.range([1, 20], {\n label: \"Minimum contrast\",\n value: 4,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":806,"value":"viewof ringColor = SwatchInput(\n invertCode.length\n ? [ColorRGB.fromString(\"#ffffff\"), ...lightColors]\n : [ColorRGB.fromString(\"#000000\"), ...darkColors],\n { label: \"Ring color\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":808,"value":"viewof dotColor = SwatchInput(\n invertCode.length\n ? [ColorRGB.fromString(\"#ffffff\"), ...lightColors]\n : [ColorRGB.fromString(\"#000000\"), ...darkColors],\n { label: \"Dot color\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"viewof backColor = SwatchInput(\n invertCode.length\n ? [...darkColors, ColorRGB.fromString(\"#000000\")]\n : [...lightColors, ColorRGB.fromString(\"#ffffff\")],\n { label: \"Back color\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":838,"value":"warnings = {\n let minContrast = 10;\n // measure contrast between colors\n let criteria = {\n \"Not enough contrast between corner square and background\": contrast(\n backColor.toString(),\n dotColor.toString()\n ),\n \"Not enough contrast between corner tring and background\": contrast(\n backColor.toString(),\n ringColor.toString()\n )\n };\n const warns = Object.entries(criteria).filter(([name, crit]) => {\n return crit < minContrast;\n });\n if (warns.length === 0) return html``;\n return html`

Warning: minimum contrast is ${minContrast}

${w[0]} (${w[1].toFixed(2)})

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"## QR dot template\n\nThis SVG element is the template that will be repeated in the dot matrix that encodes the data of the QR code. It receives an input color, and generates an element with the corresponding fill.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":560,"value":"viewof circleRadius = Inputs.range([0, 0.5], {\n step: 0.01,\n value: 0.25,\n label: \"Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":663,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":667,"value":"### Black & white settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":601,"value":"viewof blackWhite = Inputs.checkbox([\"\"], { label: \"Black & white\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"viewof circleOpacity = Inputs.range([0, 1], {\n step: 0.05,\n value: 0.5,\n label: \"Opacity\",\n disabled: blackWhite.length === 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"viewof hasRectangle = Inputs.checkbox([\"\"], {\n label: \"Square background\",\n disabled: blackWhite.length === 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":629,"value":"viewof backgroundOpacity = Inputs.range([0, 1], {\n step: 0.05,\n value: 0.3,\n label: \"Background opacity\",\n disabled: blackWhite.length === 0 || hasRectangle.length === 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"{\n const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n svg.setAttribute(\"viewBox\", \"0 0 1 1\");\n svg.appendChild(svgPattern(\"black\"));\n svg.style.width = \"200px\";\n svg.style.height = \"200px\";\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"## Color lookup tables\n\nCreating a lookup table of colors for this logo using result from the quantizer algorithm. We will use this image later when deciding which color dot to use in the QR pattern. Adjusting the settings in this section is not needed it \"Black & white\" is checked, since in that case the dots will not use colors from the input image.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":647,"value":"### Select colors and tolerance\n\nSelect a list of colors that are considered for generating the color lookup table, which will determine the color of the dots in the final image. The colors will be used according to their lightness level to produce a sufficient contrast with the background. Adjust the tolerance levels for the black level to get the desired result.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":691,"value":"viewof validColors = SwatchInput(quantizedColors, {\n multiple: true,\n value: quantizedColors\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"colorLookup = getLookup()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"blackLookup = getLookup(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":622,"value":"# Code implementation\n\nThe following section contains all the required code that runs the QR code generator above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":719,"value":"isLoading = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"svgPattern = (color) => {\n const g = document.createElementNS(\"http://www.w3.org/2000/svg\", \"g\");\n const path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n path.setAttribute(\"d\", \"M0,0L0,1L1,1L1,0Z\");\n path.setAttribute(\"fill\", color);\n const circle = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"circle\"\n );\n circle.setAttribute(\"cx\", \"0.5\");\n circle.setAttribute(\"cy\", \"0.5\");\n circle.setAttribute(\"r\", circleRadius);\n circle.setAttribute(\"fill\", color);\n\n if (blackWhite.length) {\n path.setAttribute(\"fill-opacity\", backgroundOpacity);\n circle.setAttribute(\"fill-opacity\", circleOpacity);\n }\n if (hasRectangle.length) {\n g.appendChild(path);\n }\n g.appendChild(circle);\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"table = {\n const el = document.createElement(\"div\");\n el.innerHTML = qrCode._qr.createTableTag();\n const table = el.getElementsByTagName(\"table\")[0];\n table.style.width = \"200px\";\n table.style.height = \"200px\";\n return el;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"qrCode = new QRCodeStyling({\n width: 300,\n height: 300,\n type: \"svg\",\n data: qrData\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"canvas = {\n // create canvas\n const canvas = document.createElement(\"canvas\");\n await drawImage(canvas);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":894,"value":"drawImage = async (c) => {\n c.width = pixelSize;\n c.height = pixelSize;\n\n // draw image\n const ctx = c.getContext(\"2d\");\n ctx.imageSmoothingEnabled = false;\n if (inputImage) {\n const img = await inputImage.image();\n await img.decode();\n // crop image center fit\n const cropSize = Math.min(img.width, img.height);\n const cropX = (img.width - cropSize) / 2;\n const cropY = (img.height - cropSize) / 2;\n ctx.drawImage(\n img,\n cropX,\n cropY,\n cropSize,\n cropSize,\n 0,\n 0,\n pixelSize,\n pixelSize\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"colorSwatches(lightColors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":796,"value":"colorSwatches(darkColors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":792,"value":"darkColors = quantizedColors.filter((c) => isWhiteText(c))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":798,"value":"lightColors = quantizedColors.filter((c) => !isWhiteText(c))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"quantizedColors = quantizeImage(await inputImage.url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"## Reference image\n\nThis QR code was created by hand using the Chrome Devtools console and manipulating the result of the QR code algorithm and manually replacing the square anchor reference point elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":170,"value":"htl.html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"QRCodeStyling = require(\"https://unpkg.com/qr-code-styling@1.6.0-rc.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":284,"value":"import { quantizeImage } from \"@mateh/extract-palette\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":970,"value":"import { SwatchInput } from \"@mateh/swatch-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"import { isWhiteText, colorSwatches, ColorRGB, generate } from \"@mateh/palette\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"import { contrast } from \"@mbostock/wcag-contrast-ratio\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":717,"value":"import { loading } from \"@mateh/loading\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":538,"value":"## External links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":58,"value":"https://generator.qrcode.studio/qr/transparent?data=test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"https://qr-code-styling.com/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"