url轉(zhuǎn)二維碼（js,qrcode）可以帶logo
2021-09-17 11:48:30

?

?

?

import QRCode from 'qrcode'  
import { Image } from 'antd'




const [qrCodeImageUrl, setQrCodeImageUrl] = useState()




useEffect(() => {
    QRCode.toDataURL(document.location.href)
      .then((url) => {
        console.log(url)
        setQrCodeImageUrl(url)
      })
      .catch((err) => {
        console.error(err)
      })
  }, [])





                <Image
                  className="m-qrcode-img"
                  src={qrCodeImageUrl}
                  alt={'圖片'}
                  preview={{
                    mask: '',
                  }}
                ></Image>

參考鏈接：https://www.npmjs.com/package/qrcode

?

?

?

帶logo：

import QrCodeWithLogo from 'qr-code-with-logo'
import { Image } from 'antd'


const [qrCodeImageUrl, setQrCodeImageUrl] = useState()


  useEffect(() => {
    const image = new Image()
    QrCodeWithLogo.toImage({
      image,
      content: document.location.href,
      logo: {
        src: logo,
      },
    })
    image.id = 'm-img'
    image.style = "display:none;"
    document.body.appendChild(image)
    const imageDom = document.getElementById('m-img')
    setTimeout(() => {
      setQrCodeImageUrl(imageDom.src)
    })
  }, [])





                <Image
                  className="m-qrcode-img"
                  src={qrCodeImageUrl}
                  alt={'圖片'}
                  preview={{
                    mask: '',
                  }}
                ></Image>

?

?

?

?

?

?

?