react APP内置移动端h5 canvas画布二维码转成base64链接

有这么一个需求，保存图片到手机相册，真正的保存是调用的sdk原生的接口，这个不是我想讲的重点

我想说的是，如何使用qrcode.react 生成二维码之后再将以canvas画布形式渲染的二维码转成base64链接！

参考自react二维码qrcode.react以及点击二维码的下载二维码图片_ou得之的博客-CSDN博客这位博主

/* global APPID */
import React from 'react'
import { connect } from 'dva'
import { Flex, Button } from 'antd-mobile'
import LoadWrap from '@/components/LoadWrap'
import QRCode from 'qrcode.react'
import NavBar from '@/components/NavBar'
import Bridge from '@/utils/bridge'
import styles from './qrcode.less'
import APIENV from '../env'
import $ from 'jquery';@connect(({ signIn }) => ({detail: signIn.detail
}))
class QRCodePage extends React.Component {constructor(props) {super(props)this._inThisPage = truethis.vid = props.location.query.id;if (this.vid) {props.dispatch({type: 'signIn/fetchDetail',payload: { vid: this.vid }})}this.handleBack = this.handleBack.bind(this)this.handleNativeBack = this.handleNativeBack.bind(this)this.handleNativeBack()}componentWillUnmount() {this._inThisPage = false}_downLoad = () => {var Qr = document.getElementById('qrid');let imgBase64 = Qr.toDataURL("image/png");console.log('Qr.toDataURL("image/png")', Qr.toDataURL("image/png"));this.saveToAlbum(imgBase64);}// getBase64Image = (img) => {//   var canvas = document.createElement("canvas");//   canvas.width = img.width;//   canvas.height = img.height;//   var ctx = canvas.getContext("2d");//   ctx.drawImage(img, 0, 0, img.width, img.height);//   var dataURL = canvas.toDataURL("image/png");//修改图片后缀//   return dataURL// }// main = () => {//   var img = document.createElement('img');//   img.src = $("#h5qrcodeimg").attr('src');//赋予二维码src//   img.onload = function () {//     var data = this.getBase64Image(img);//     console.log(data);//     $("#down_qrcode").attr("href", data);//转码后赋予下载按钮(a标签)的href//   };// }handleBack() {if (this.props.location.query.backto === 'list') {this.props.history.push('/electric')} else {this.props.history.goBack();}}handleNativeBack() {Bridge.onMessage(msg => {if (!this._inThisPage) return;msg = JSON.parse(msg)if (msg && msg.type === 'back') {this.handleBack();}})}saveToAlbum = (imgBase64) => {// 图片预览, 可选参数 saveable：是否显示保存图片按钮， index: 多图情况下指定当前浏览的序号if (window.mbBridge) {window.mbBridge.mb.image({index: 1,saveable: true,urls: [imgBase64]});}}render() {const { detail, location } = this.props;const info = detail.data || {}const query = location.query;const src = `${APIENV}/down/app/signin/?name=${query.signInName}&num=${query.index || 1}&signInId=${query.signInId}#/`;return (<Flex direction="column" align="stretch" className={`${styles.qrcodePage} flex100`}><NavBartitle="二维码展示"handleBack={this.handleBack}/><Flex.Item className="flex100"><div className={styles.headPlace}></div><div className={styles.card}><div id="QR" style={{ padding: '50px 0 45px 0' }}><QRCode id='qrid' value={src} onClick={this._downLoad} size={191} /></div></div><div className={styles.saveBtn}><div type="primary" className={styles.btnCss} onClick={this._downLoad}>保存到手机</div></div>{/* <LoadWrap data={{err: {message: '缺少ID参数'}}}/> */}</Flex.Item></Flex>);}}export default QRCodePage

问题来了，如果我想把文案也一起作为图片存储为base64那要怎样做呢？（效果图如下）

关键是yarn add html2canvas

利用html2canvas将div生成base64（html2canvas这边有一个神坑！！！在IOS上，如果你的html2canvas版本不是1.0.0-rc.4，会导致在ios真机上调试时，不执行promise.then回调函数！！！）

比如：

再比如：

...无语凝噎

/* global APPID */
import React from 'react'
import { connect } from 'dva'
import { Flex, Button } from 'antd-mobile'
import LoadWrap from '@/components/LoadWrap'
import QRCode from 'qrcode.react'
import NavBar from '@/components/NavBar'
import Bridge from '@/utils/bridge'
import styles from './qrcode.less'
import APIENV from '../env'
import $ from 'jquery';
import html2canvas from 'html2canvas';@connect(({ signIn }) => ({detail: signIn.detail
}))
class QRCodePage extends React.Component {constructor(props) {super(props)this._inThisPage = truethis.vid = props.location.query.id;if (this.vid) {props.dispatch({type: 'signIn/fetchDetail',payload: { vid: this.vid }})}this.canvas = React.createRef();this.handleBack = this.handleBack.bind(this)this.handleNativeBack = this.handleNativeBack.bind(this)this.handleNativeBack()}componentDidMount() {html2canvas(document.querySelector("#capture")).then(canvas => {// document.body.appendChild(canvas);let dataImg = canvas.toDataURL();this.newImgBase64 = dataImg;});}componentWillUnmount() {this._inThisPage = false}_downLoad = () => {console.log('this.newImgBase64===>:', this.newImgBase64);this.saveToAlbum(this.newImgBase64);}handleBack() {if (this.props.location.query.backto === 'list') {this.props.history.push('/electric')} else {this.props.history.goBack();}}handleNativeBack() {Bridge.onMessage(msg => {if (!this._inThisPage) return;msg = JSON.parse(msg)if (msg && msg.type === 'back') {this.handleBack();}})}saveToAlbum = (imgBase64) => {// window.mbBridge不是一个通用api 它是在我们app外壳通过webview注入到h5页面的window里的，需要根据自己的情况进行修改// 图片预览, 可选参数 saveable：是否显示保存图片按钮， index: 多图情况下指定当前浏览的序号if (window.mbBridge && window.mbBridge.mb) {console.log('保存图片被触发了！！！');window.mbBridge.mb.saveImage(imgBase64);}}render() {const { detail, location } = this.props;const info = detail.data || {}const query = location.query;const src = `${APIENV}/down/app/signin/?name=${query.signInName}&num=${query.index || 1}&signInId=${query.signInId}#/`;return (<Flex direction="column" align="stretch" className={`${styles.qrcodePage} flex100`} style={{ overflow: 'auto' }}><NavBartitle="二维码展示"handleBack={this.handleBack}/><Flex.Item className={`${styles.column} flex100`} style={{ background: '#F6F6F6', paddingBottom: 30 }}><div id="capture"><div className={`${styles.card} ${styles.column}`}><div className={`${styles.column}`} style={{ alignItems: 'flex-start', padding: '25px 25px 0 25px' }}><span className={`${styles.title}`}>{query.signInName}</span><span className={`${styles.date}`}>{query.createAt}</span></div><div id="QR" style={{ padding: '30px 0 35px 0', alignItems: 'center' }} className={styles.column}><QRCode id='qrid' value={src} onClick={this._downLoad} size={260} /></div><span className={`${styles.noticeText}`} >使用OA或党建APP扫描二维码签到</span></div></div><div className={styles.saveBtn}><div type="primary" className={styles.btnCss} onClick={this._downLoad}>保存到手机</div></div></Flex.Item></Flex>);}}export default QRCodePage

可以在base64图片在线转换工具 - 站长工具该站点进行转换查看base64是否有效

react APP内置移动端h5 canvas画布二维码转成base64链接相关推荐

移动端H5(JavaScript)识别二维码功能
前言时隔一年多, 再次接触到H5识别二维码功能,这次直接写个demo方便大家学习和使用.(其实是方便自己抄自己代码-). 直接上代码 QRcode下载地址长的好看的都点⭐了!!! <!DOC ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
PC端调用摄像头扫描二维码，拿到二维码信息
PC端调用摄像头扫描二维码,拿到二维码信息 <template><el-dialogtitle="扫描设备二维码":visible.sync="dial ...
前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册
前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保 ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
使用canvas画二维码
使用canvas画二维码需要使用 qrcode 依赖具体代码如下 <template><div><canvas ref="code">< ...
利用canvas把二维码和图片合成海报
思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成 ...
H5混合开发二维码扫描教程之大圣众娱十人牛牛源码搭建架设
今天用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底,于是晚上回家开始网上各处找方案. ...
【h5】扫描二维码打开app或点击下载功能的实现
背景: 有时候,会遇到这种需求,就是扫描二维码打开app,若是用户没有这个app则提示它跳转:或者,用户首次安装,通过扫描二维码进行跳转到应用商店,或直接下载apk. 用网页直接来调用app是 ...

react APP内置移动端h5 canvas画布二维码转成base64链接

有这么一个需求，保存图片到手机相册，真正的保存是调用的sdk原生的接口，这个不是我想讲的重点

问题来了，如果我想把文案也一起作为图片存储为base64那要怎样做呢？（效果图如下）

可以在base64图片在线转换工具 - 站长工具该站点进行转换查看base64是否有效

react APP内置移动端h5 canvas画布二维码转成base64链接相关推荐

最新文章

热门文章