使用 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

posted @   天官赐福·  阅读(1606)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
返回顶端
点击右上角即可分享
微信分享提示