react APP内置移动端h5 保存图片到手机相册

墨蓝 2022-12-02 00:58 290阅读 0赞

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

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

**参考自**[https://blog.csdn.net/qq\_42190134/article/details/92218323][https_blog.csdn.net_qq_42190134_article_details_92218323]这位博主

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70][]

/* 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 = true
    
        this.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`}>
            <NavBar
              title="二维码展示"
              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回调函数！！！）**

比如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1][]

再比如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 2][]

...无语凝噎

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 3][]

/* 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 = true
    
        this.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' }}>
            <NavBar
              title="二维码展示"
              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

### 可以在[http://tool.chinaz.com/tools/imgtobase][http_tool.chinaz.com_tools_imgtobase]该站点进行转换查看base64是否有效 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 4][]

[https_blog.csdn.net_qq_42190134_article_details_92218323]: https://blog.csdn.net/qq_42190134/article/details/92218323
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70]: /images/20221123/b5cd06b4a1114947accc79bb71fa6b8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1]: /images/20221123/7f81a78fb6974dd491be5a8470efb6d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 2]: /images/20221123/c04a95e94bb94073be67f29a8c48e856.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 3]: /images/20221123/c98bd3db9e5a46b5b4bf368fbe04c8f2.png
[http_tool.chinaz.com_tools_imgtobase]: http://tool.chinaz.com/tools/imgtobase
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 4]: /images/20221123/7aee4741e68444938123ff4b75c23df3.png