大型网站建设完全教程百度广告大全

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

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

1. 安装插件

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

2. 引入

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

3. 使用

{!this.state.createImgUrl&&<div id="saveImgBox" className={styles.saveImgBox}><QRCodeid='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.dataif (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 = thishtml2canvas(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)});
}