--- title: 'url轉二維碼（js,qrcode）可以帶logo' date: 2021-08-26 18:33:00 ---  ```javascript 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](https://www.npmjs.com/package/qrcode)  帶logo： ```javascript 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> ```