【React】コピペOK! QRコードダウンロードボタンの実装

"use client"
 
import { QRCodeSVG } from "qrcode.react"
 
export function QrCodeDownloadButton({ profileIdPromise, clientRoleType }: Props) {
  const url = "https://to-ko-s.com"
 
  return (
    <>
      <button>QRコードダウンロード</button>
      {/* display:noneで隠しています */}
      <div className="hidden">
        <QRCodeSVG value={url} size={512} level="H" />
      </div>
    </>
  )
}

"use client"
 
import { QRCodeSVG } from "qrcode.react"
 
export function QrCodeDownloadButton({ profileIdPromise, clientRoleType }: Props) {
  const [isReady, setIsReady] = useState(false)
  const qrRef = useRef<HTMLDivElement>(null)
 
  useEffect(() => {
    if (qrRef.current?.querySelector("svg")) {
      setIsReady(true)
    }
  }, [])
 
  const url = "https://to-ko-s.com"
 
  return (
    <>
      <button disabled={!isReady}>QRコードダウンロード</button>
      {/* display:noneで隠しています */}
      <div ref={qrRef} className="hidden">
        <QRCodeSVG value={url} size={512} level="H" />
      </div>
    </>
  )
}

"use client"
 
import { QRCodeSVG } from "qrcode.react"
 
export function QrCodeDownloadButton({ profileIdPromise, clientRoleType }: Props) {
  const [isReady, setIsReady] = useState(false)
  const qrRef = useRef<HTMLDivElement>(null)
 
  useEffect(() => {
    if (qrRef.current?.querySelector("svg")) {
      setIsReady(true)
    }
  }, [])
 
  const url = "https://to-ko-s.com"
 
  const downloadQrCode = () => {
    // 1.useRefでアクセス
    const svg = qrRef.current?.querySelector("svg")
    if (!svg) return
 
    // 2.Canvas要素の作成 + Canvas要素のサイズ指定
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext("2d")
    if (!ctx) return
    // display:noneの要素ではclientWidth/clientHeightが0になるため、QRCodeSVGのsizeと同じ値を直接指定
    const size = 512
    const pixelRatio = window.devicePixelRatio || 1
    canvas.width = size * pixelRatio
    canvas.height = size * pixelRatio
 
    // 3.img要素を作成
    const img = new Image()
 
    // 4.作成したimg要素に取得したSVGの情報を付与する
    const svgData = new XMLSerializer().serializeToString(svg)
    img.src = `data:image/svg+xml;base64,${btoa(svgData)}`
 
    // 5.CanvasにSVG画像を描画させダウンロードする
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      //pngデータを指定、jpegにしたい場合はimage/jpegになる
      const pngUrl = canvas.toDataURL("image/png")
      const link = document.createElement("a")
      link.href = pngUrl
      link.download = "qr-code.png"
      link.click()
    }
  }
 
  return (
    <>
      <button onClick={downloadQrCode} disabled={!isReady}>
        QRコードダウンロード
      </button>
      {/* display:noneで隠しています */}
      <div ref={qrRef} className="hidden">
        <QRCodeSVG value={url} size={512} level="H" />
      </div>
    </>
  )
}

"use client"
 
import { QRCodeSVG } from "qrcode.react"
 
export function QrCodeDownloadButton({ profileIdPromise, clientRoleType }: Props) {
  // ~~~~ 省略（useRef, useState, useEffect）~~~~
  const url = "https://to-ko-s.com"
 
  const downloadQrCode = () => {
    // 1.useRefでアクセス
    const svg = qrRef.current?.querySelector("svg")
    if (!svg) return
 
    // 2.Canvas要素の作成 + Canvas要素のサイズ指定
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext("2d")
    if (!ctx) return
    // display:noneの要素ではclientWidth/clientHeightが0になるため、QRCodeSVGのsizeと同じ値を直接指定
    const size = 512
    const pixelRatio = window.devicePixelRatio || 1
    canvas.width = size * pixelRatio
    canvas.height = size * pixelRatio
 
    // 3.img要素を作成
    const img = new Image()
 
    // 4.作成したimg要素に取得したSVGの情報を付与する
    const svgData = new XMLSerializer().serializeToString(svg)
    img.src = `data:image/svg+xml;base64,${btoa(svgData)}`
 
    // 5.CanvasにSVG画像を描画させダウンロードする
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      //pngデータを指定、jpgにしたい場合はimage/jpgになる
      const pngUrl = canvas.toDataURL("image/png")
      const link = document.createElement("a")
      link.href = pngUrl
      //qr-code.pngとしてダウンロード
      link.download = "qr-code.png"
      link.click()
    }
  }
 
  return (
    <>
      <button onClick={downloadQrCode} disabled={!isReady}>
        QRコードダウンロード
      </button>
      {/* display:noneで隠しています */}
      <div ref={qrRef} className="hidden">
        <QRCodeSVG value={url} size={512} level="H" />
      </div>
    </>
  )
}