From 456b21846e549dcfed9524d1c8325c44ec6afafe Mon Sep 17 00:00:00 2001
From: YFeng <499756901@qq.com>
Date: Tue, 27 Feb 2024 18:34:38 +0800
Subject: [PATCH] 实现小程序中签名
---
plugins/qrcode/CQRCode.vue | 35 +++++++++++++++++++++++++++++++----
1 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/plugins/qrcode/CQRCode.vue b/plugins/qrcode/CQRCode.vue
index 8acaae5..49a71aa 100644
--- a/plugins/qrcode/CQRCode.vue
+++ b/plugins/qrcode/CQRCode.vue
@@ -6,18 +6,27 @@
<template>
<view class="c-qr-code">
<canvas ref="canvas"></canvas>
+ <AtButton
+ v-if="downloadable"
+ type="primary"
+ full
+ :onClick="evt => handleSaveToAlbum()"
+ >保存到手机</AtButton>
</view>
</template>
<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
+import { AtButton } from 'taro-ui-vue';
import QRCode from 'qrcode';
import './cQrCode.scss';
export default {
name: 'CQRCode',
- components: {},
+ components: {
+ AtButton,
+ },
props: {
content: {
type: String,
@@ -31,6 +40,11 @@
type: Number,
default: 2,
},
+ // 是否显示保存到手机
+ downloadable: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
return {
@@ -38,12 +52,25 @@
};
},
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,
{
- width: this.size,
+ width: this.size * 2,
margin: this.margin,
},
err => {
@@ -66,7 +93,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