From 4abc8bbf94b952b8934f31c33b4342c1d1586fbf Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 23 Mar 2023 10:31:35 +0800
Subject: [PATCH] 二维码增加保存功能
---
plugins/qrcode/CQRCode.vue | 26 ++++++++++++++++++++++++--
1 files changed, 24 insertions(+), 2 deletions(-)
diff --git a/plugins/qrcode/CQRCode.vue b/plugins/qrcode/CQRCode.vue
index 8acaae5..de005a7 100644
--- a/plugins/qrcode/CQRCode.vue
+++ b/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 {
--
Gitblit v1.9.1