1.需要安装两个插件
import QRCode from 'qrcode.react';
import domtoimage from 'dom-to-image';
2.生成文字图片
dom代码
const [textImg, setTextImg] = useState('') // 文字图片链接
// 调用字体转图片
useEffect(()=>{
getImg()
},[visible])
const getImg = () => {
const node = document.getElementById("node");
domtoimage.toPng(node).then((url) => {
setTextImg(url)
}).catch(() => {
console.log("error")
})
}
//dom
<div className="node-content">
<div id="node" style={{ 'width': '42px' }}>
<span className="node-title">{name?.substring(0,3)}</span>
</div>
</div>
3.生成二维码
<QRCode
id="qrCode"
value={'https://www.baidu.com'}
size={138} // 二维码的大小
fgColor="#000000" // 二维码的颜色
style={{ margin: 'auto' }}
imageSettings={{ // 二维码中间的图片
src: textImg,
height: 15,
width: 30,
excavate: true, // 中间图片所在的位置是否镂空
}}
/>
4.下载
const codeDown = (() => {
const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
const img = new Image();
img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
const downLink = document.getElementById('down_link');
downLink.href = img.src;
downLink.download = '二维码'; // 图片name
})
<a id="down_link" onClick={codeDown}>下载二维码</a>