@akamfoad/qrcode 試用紀錄

QR Code,

引言

試作 QR Code。支援 Canvas 與 SVG 兩種模式。

參考文章

https://www.npmjs.com/package/@akamfoad/qrcodewww.npmjs.com

開發平台

前端：React.v18.2

關鍵程式碼

WebQRCode

WebQRCode.js

import React, { useEffect, useMemo, useState } from 'react'
import { QRCodeCanvas } from '@akamfoad/qrcode'

export default function WebQRCode({ 
  value     /* string */, 
  level     /* [L,M*,Q,H] */, 
  size      /* number */, 
  image_url /* string */, 
  fg_color  /* string */, 
  bg_color  /* string */ 
}) {
  const [dataUrlWithQRCode, setDataUrlWithQRCode] = useState(null)

  const config = useMemo(() => ({
    level: level || 'M',
    fgColor: fg_color || '#000',
    bgColor: bg_color || '#FFF',
    image: image_url && {
      source: image_url,
      width: '20%',
      height: '20%',
      x: 'center',
      y: 'center',
    },
  }), [level, image_url, fg_color, bg_color])

  useEffect(() => {
    async function calcDataUrlAsync() {
      const qrCanvas = new QRCodeCanvas(value, config)
      const dataUrl = await qrCanvas.toDataUrl()
      setDataUrlWithQRCode(dataUrl)
    }

    calcDataUrlAsync()
  }, [value, config])

  return (
    <div role='qrcode' style={{ display: 'inline-block', width: size }}>
      {dataUrlWithQRCode && <img style={{ width: '100%' }} src={dataUrlWithQRCode} />}
    </div>
  )
}

WebQRCodeSVG

WebQRCodeSVG.js

import React, { useEffect, useMemo, useRef } from 'react'
import { QRCodeSVG } from '@akamfoad/qrcode'

export default function WebQRCodeSVG({
  value     /* string */,
  level     /* [L,M*,Q,H] */,
  size      /* number */,
  image_url /* string */,
  fg_color  /* string */,
  bg_color  /* string */
}) {
  const divSvgRef = useRef()

  const config = useMemo(() => ({
    level: level || 'M',
    fgColor: fg_color || '#000',
    bgColor: bg_color || '#FFF',
    image: image_url && {
      source: image_url,
      width: '20%',
      height: '20%',
      x: 'center',
      y: 'center',
    },
  }), [level, image_url, fg_color, bg_color])

  useEffect(() => {
    const qrSVG = new QRCodeSVG(value, config)
    const xmlWithQRCode = qrSVG.toString()
    divSvgRef.current.innerHTML = xmlWithQRCode
  }, [value, config])

  return (
    <div role='qrcode' ref={divSvgRef} style={{ display: 'block', width: size}}></div>
  )
}

應用時, canvas 版與 svg 版用法有些差異，主因在圖形長寬大小決定不同。

<div class="my-qrcode">
  <h5>QRCodeCanvas</h5>
  <web-qrcode value=@value /> /* canvas 產生固定長寬圖形，圖形大小依 vlaue 長度成正比。 */
  <web-qrcode value=@value level="Q" fg_color="#8D1485" image_url=@imageUrl2 />
</div>

<div class="my-qrcode">
  <h5>QRCodeSVG</h5>
  <div class="d-inline-block" style="width:54px;">
    <web-qrcode-svg value=@value /> /* SVG 是向量圖形，大小可由父層決定。 */
  </div>
  <div class="d-inline-block" style="width:54px;">
    <web-qrcode-svg value=@value level="Q" fg_color="#8D1485" image_url=@imageUrl />
  </div>
</div>

補充 on 25-09-01

widgets\QrCodeWidget.tsx

/**
 * TypeScript 語法範例
 */
import { useEffect, useMemo, useRef } from 'react';
import { QRCodeSVG } from '@akamfoad/qrcode';

export default function QrCodeWidget(props: {
  value: string,
  imageSrc?: string,
  bgColor?: string,
  fgColor?: string,
  className?: string,
  style?: React.CSSProperties,
}) {
  const devRef = useRef<HTMLDivElement>(null)

  const options = useMemo(() => ({
    bgColor: props.bgColor,
    fgColor: props.fgColor,
    image: props.imageSrc ?
      {
        source: props.imageSrc,
        width: '20%',
        height: '20%',
        x: 'center',
        y: 'center',
      } : undefined,
  }), [props.bgColor, props.fgColor, props.imageSrc])

  const qrSvgXml = useMemo(() => {
    const qrSVG = new QRCodeSVG(props.value, options);
    return qrSVG.toString();
  }, [props.value, options])

  useEffect(() => {
    if (devRef.current && qrSvgXml)
      devRef.current.innerHTML = qrSvgXml
  }, [qrSvgXml,options])

  return (
    <div ref={devRef} className={props.className} style={props.style} />
  )
}

沒圖沒真象