--- title: 'url转二维码（js,qrcode）可以带logo' date: 2021-08-26 18:33:00 --- ![](https://img-blog.csdnimg.cn/20210826183228509.png?x-oss-processimage/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5b6Q5ZCM5L-d,size_20,color_FFFFFF,t_70,g_se,x_16) ```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) ![](https://img-blog.csdnimg.cn/20210826192337187.png?x-oss-processimage/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5b6Q5ZCM5L-d,size_20,color_FFFFFF,t_70,g_se,x_16) 带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> ```