使用 qrcode.react 绘制二维码,并下载二维码
如果是要生成svg格式的二维码,可以使用以下方法进行下载
/** * 将svg导出成图片 * @param node svg节点 => document.querySelector('svg') * @param name 生成的图片名称 * @param width 生成的图片宽度 * @param height 生成的图片高度 * @param type 生成的图片类型 */ export const covertSVG2Image = (node, name, width, height, type = 'png') => { let serializer = new XMLSerializer() let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node) let image = new Image() image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source) let canvas = document.createElement('canvas') canvas.width = width canvas.height = height let context = canvas.getContext('2d') context.fillStyle = '#fff' context.fillRect(0, 0, 10000, 10000) image.onload = function () { context.drawImage(image, 0, 0) let a = document.createElement('a') a.download = `${name}.${type}` a.href = canvas.toDataURL(`image/${type}`) a.click() } }
import QRCode from 'qrcode.react';
const [qrcode, setQrcode] = useState('')
//导出canvas绘制的二维码,导出格式为png const handleClickDownLoad = () => { let canvas = $('#qrCodeBox canvas')[0]; setQrcode(canvas.toDataURL('image/png')); };
<div className="qr-code" id="qrCodeBox"> <QRCode renderAs="svg"//渲染格式为svg,默认为canvas value={"http://www.baidu.com"}//需要渲染为二维码的链接地址 size={180}//渲染出来的二维码大小
/> <div onClick={() => covertSVG2Image($('#qrCodeBox svg')[0], '111', 180, 180)}> 点击下载svg绘制的二维码 </div> <a onClick={handleClickDownLoad} download='二维码' href={qrcode}> 点击下载canvas绘制的二维码 </a> </div>
参考地址:https://www.jianshu.com/p/92d5a778d964
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了