uniapp weapp-qrcode.js生成二维码，并下载二维码图片

找了很多插件，但是都太复杂，不符合自己的要求

找了个最简单的。weapp-qrcode.js ，生成二维码没有问题，但是下载图片获取不到图片路径，自己稍微改造了一下

https://github.com/yingye/weapp-qrcode/issues/18  github也提到通用的问题，callback回调不准确。

 

页面效果

js插件地址：https://github.com/yingye/weapp-qrcode

代码如下

<template>
    <view>
        <cu-custom bgColor="bg-gradual-white" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">我的拉新二维码</block>
        </cu-custom> 
        <view style="position: absolute;">
            <view class="qrcode-bg">
                <view class="round_1" ></view>
                <view class="round_2" ></view>
            </view>
            <!-- <image class="qrcode-bg" src="../../static/login-bg.png"></image> -->
            <image  class="qr-img car_image" src="../../static/mine/mine_qrcode_car.png"></image>
        </view>
        
        <view class="qr-content">
            <!-- <image class="qr-img" src="../../static/mine/qrcode.jpg"></image> -->
            <canvas class="canvas-code"canvas-id="myQrcode" style=" padding-top: 20rpx;
            background:#fff;width: 200px;height: 200px;"/>
        </view>
        <view>
            <button class="qr-btn btn-position" @click="saveQrcode" @longpress="saveQrcode">下载二维码</button>
        </view>
        
    </view>
</template>
 
<script>
    import QRCode from '@/utils/weapp-qrcode.js'
    export default {
        data() {
            return {
                qrcodePath:'',
                myWidth:400,
                myHeight:400
            };
        },
        beforeCreate() {
            // LTJ:2020-12-31 判断是否已登录
            if(!this.$util.checkLogin("path=../plugin/qrcode"))
                return ;
            
        },
        
        onLoad: function (options) {
            console.log('https://d.cartour.club/api/register?refid=' + uni.getStorageSync("userId"))
            this.reateQrcode()
            let that = this
            
          },
        methods: {
            createRpx2px(rpx) {
                console.log(wx.getSystemInfoSync().windowWidth,'屏幕宽度')
                if(wx.getSystemInfoSync().windowWidth <= 375){
                    this.myWidth = 400
                    this.myHeight = 400
                }else if(wx.getSystemInfoSync().windowWidth >= 414){
                    this.myWidth = 363
                    this.myHeight = 363
                }
                return wx.getSystemInfoSync().windowWidth / 750 * rpx
              },
             reateQrcode() {
                var that = this;
                console.log(that.createRpx2px(363),'宽度')
                const imgPath = new Promise((resolve, reject) => {
                    new QRCode('myQrcode', {
                        // text:'https://www.baidu.com/',
                      text:'https://d.cartour.club/api/register?refid=' + uni.getStorageSync("userId"),
                      width: that.createRpx2px(this.myWidth),
                      height: that.createRpx2px(this.myHeight),
                      padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
                      correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
                    })
                })
              },
            
         //用户二维码保存到本地相册
          saveQrcode: function () {
              uni.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 400,
                height: 400,
                destWidth: 400,
                destHeight: 400,
                canvasId: 'myQrcode',
                success: function(res) {
                // 在H5平台下，tempFilePath 为 base64
                  let data = res.tempFilePath
                console.log(res)
                uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function () {
                        console.log('save success');
                        uni.showToast({
                            title:'保存成功',
                            icon:'success',
                            duration:2000,
                        })
                    }
                });
                } 
              })
             
            // var that = this;
            // uni.getImageInfo({
            //   src: this.qrcodePath,
            //   success: function (ret) {
                  // debugger
                  // console.log(ret)
            //     var path = ret.path;
            //     uni.saveImageToPhotosAlbum({
            //       filePath: path,
            //       success(result) {
            //         if (result.errMsg === 'saveImageToPhotosAlbum:ok') {
            //           uni.showToast({
            //             title: '保存成功',
            //           })
            //         }
            //       }
            //     })
            //   }
            // })
          },
        }
    }
</script>

<style>
    @import "../../common.css";
    .qrcode-bg{
        width: 750rpx;
        height: 248rpx;
        background-image: linear-gradient(263deg, 
        #6717cd 0%, 
        #2871fa 100%);
        position: relative;
    }
    .round_1{
        width: 220px;
        height: 220px;
        border-radius: 100%;
        position: absolute;
        left: -40px;
        top: -96px;
        background-color: #3b75f8;
        opacity:0.7;
    }
    .round_2{
        width: 220px;
        height: 220px;
        border-radius: 100%;
        position: absolute;
        left: 93px;
        top: 43px;
        background-color: #5550e5;
        opacity: 0.6;
    }
    /* iphone678plus*/
    @media screen and  (width:414px) {
       .qr-content{
           width: 500rpx;
           height: 500rpx;
           position: relative;
           top: 195rpx;
           left: 17%;
           padding-top:61rpx;
           padding-left: 61rpx;
           background-color: white;
           border-radius: 8px;
       }   
    }
    /* iphone6*/
    @media screen and (width:375px) {
       .qr-content{
           width: 500rpx;
           height: 500rpx;
           position: relative;
           top: 195rpx;
           left: 17%;
           padding-top:50rpx;
           padding-left: 50rpx;
           background-color: white;
           border-radius: 8px;
       } 
    }
    
    .qr-img{
        width: 430rpx;
        position: absolute;
        height: 430rpx;
        top: 10%;
        left: 10%;
    }
    .car_image{
        width: 170rpx;
        height: 120rpx;
        position: relative;
        left: 76%;
        top: -87px;
    }
    .btn-position{
        position: absolute;
        bottom: 180px;
        width: 70%;
        height: 80rpx;
        left: 15%;
    }
    /* iphone678plus*/
    @media screen and  (width:414px) {
       .car_image{
           width: 170rpx;
           height: 120rpx;
           position: relative;
           left: 76%;
           top: -95px;
       }     
    }
    /* iphone6*/
    @media screen and (width:375px) {
       .car_image{
           width: 170rpx;
           height: 120rpx;
           position: relative;
           left: 76%;
           top: -87px;
       }    
    }
    /* iphone5*/
    @media screen and (width:320px) {
       .car_image{
           width: 170rpx;
           height: 120rpx;
           position: relative;
           left: 76%;
           top: -74px;
       }    
       .btn-position{
           position: absolute;
           bottom: 246rpx;
           width: 70%;
           height: 80rpx;
           left: 15%;
       }
    }
    
</style>