二维码增加保存功能

Tevin

2023-03-23 4abc8bbf94b952b8934f31c33b4342c1d1586fbf

二维码增加保存功能

 plugins/qrcode/CQRCode.vue

@@ -6,6 +6,10 @@
<template>
    <view class="c-qr-code">
        <canvas ref="canvas"></canvas>
        <button
            v-if="downloadable"
            @tap="evt => handleSaveToAlbum()"
        >保存到手机</button>
    </view>
</template>

@@ -31,6 +35,11 @@
            type: Number,
            default: 2,
        },
        // 是否显示保存到手机
        downloadable: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
@@ -38,7 +47,20 @@
        };
    },
    methods: {
        _renderQRCode(canvasDom) {
        handleSaveToAlbum() {
            if (process.env.TARO_ENV === 'h5') {
                const canvasBox = $(this.$refs.canvas.$el);
                const canvasDom = canvasBox.find('canvas')[0];
                const dataURL = canvasDom.toDataURL('image/png', 1);
                const a = document.createElement('a');
                a.download = 'qrcode.png';
                a.href = dataURL;
                a.dispatchEvent(new MouseEvent('click'));
            } else {
                // TODO: 小程序中下载
            }
        },
        _renderQRCodeH5(canvasDom) {
            QRCode.toCanvas(
                canvasDom,
                this.content,
@@ -66,7 +88,7 @@
                if (this.lastContent === this.content) {
                    return;
                }
                this._renderQRCode(canvasDom[0]);
                this._renderQRCodeH5(canvasDom[0]);
                this.lastContent = this.content;
            }, 10);
        } else {