大型网站建设完全教程营销软文小短文
需求：生成二维码，能保存到相册
框架用的 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}><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)});
}