当前位置：首页 > news >正文

react 中将生成二维码保存到相册

news 来源：原创 2025/6/19 21:15:20

需求：生成二维码，能保存到相册

框架用的 react 所以直接 qrcode.react 插件，然后直接用插件生成二维码，这里一定要写 renderAs={‘svg’} 属性，否则会报错，这里为什么会报错？？？
这个时候生成的是 svg 的格式图片，需要转为 png 格式，也就是最终页面上展示的形式，然后直接通过手机触屏长按保存相册功能就可以。

安装插件

npm install qrcode.react -save  // 二维码生成插件
npm install html2canvas -save

引入

import QRCode  from 'qrcode.react'; 
import html2canvas from 'html2canvas';

使用

{!this.state.createImgUrl&&<div id="saveImgBox" className={styles.saveImgBox}>
   <QRCode
      id='qrCode'
      value={this.state.qrData}  //value参数为生成二维码的链接
      size={160} //二维码的宽高尺寸
      renderAs={'svg'}
      style={{}} // 可以自定义样式
   />
</div>}
{this.state.createImgUrl&&<div>
  <img src={this.state.createImgUrl} alt="" style={createImgBox}/>
</div>}

// 调接口获取二维码路经,这里主要拿到后端返回的id有用
fetchPersonInfo = () => {
    let path = '/bankUser/personInfo'
    get(path).then(response => {
        let r = response.data
        if (r.code === '00') {
            this.setState({
                personInfo: r.data,
                qrData: (window.location.origin || (window.location.protocol + "//" + window.location.host)) + '/customerType' + '?bankUserId=' + r.data.userId
            },()=>{
              this.saveImg() // 将生成的svg格式二维码,转img,直接长按保存相册
            })
        } else if (r.code === '01') {
            Toast.info(r.codeMsg)
        }
    })
}
// 通过 html2canvas 插件将图片转为 img 格式后，替换原来二维码占位。这样页面上展示的是一张 png 的图片，就可以直接通过长按保存了
saveImg=()=>{
  const node = document.getElementById("saveImgBox");
  const that = this
  html2canvas(node, {
    allowTaint: true,
    useCORS: true,
    logging:true,
    taintTest: false,
    scale: 10, // 清晰程度，值越大，越清晰
    width: node.clientWidth,
    height:node.clientHeight,
  }).then(function(canvas) {
    that.setState({createImgUrl: canvas.toDataURL("image/png")})
  }).catch(function(error){
    console.log(error)
  });
}