From 17b1c347ea9c6d3efd566b62bcaf7b3aa07dfa54 Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期二, 25 六月 2024 10:22:54 +0800
Subject: [PATCH] 二维码修改
---
src/views/infomanger/companymanger/components/createQrcode.vue | 47 +++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 45 insertions(+), 2 deletions(-)
diff --git a/src/views/infomanger/companymanger/components/createQrcode.vue b/src/views/infomanger/companymanger/components/createQrcode.vue
index 0df20e8..d567ff7 100644
--- a/src/views/infomanger/companymanger/components/createQrcode.vue
+++ b/src/views/infomanger/companymanger/components/createQrcode.vue
@@ -1,18 +1,20 @@
<template>
<el-dialog title="浜岀淮鐮�" v-model="dialogVisible" width="300px" @close="closeDialog">
<div class="text-center">
- <vueQr ref="query" :text="info.companyCode"></vueQr>
+ <vueQr ref="query" background="#fff" :text="info.companyCode"></vueQr>
<div>{{ info.companyName }}</div>
<div style="margin-top: 10px;">
<el-link @click="downImage" type="primary">涓嬭浇浼佷笟鐮�</el-link>
</div>
</div>
+ <canvas ref="canvasRef" style="position: absolute; left: 0; top: 2210px;background-color: white;"></canvas>
</el-dialog>
</template>
<script lang="ts" setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
let dialogVisible = ref(false)
+const canvasRef = ref()
const info = ref({})
const query = ref()
function openDialog(row) {
@@ -24,9 +26,11 @@
dialogVisible.value = false
}
function downImage() {
+ drawText()
+ const imageUrl = canvasRef.value.toDataURL('image/png')
// console.log(query.value.imgUrl)
let aLink = document.createElement('a')
- let blob = base64ToBlob(query.value.imgUrl)
+ let blob = base64ToBlob(imageUrl)
let evt = document.createEvent("HTMLEvents")
evt.initEvent("click", true, true) // initEvent 涓嶅姞鍚庝袱涓弬鏁板湪FF涓嬩細鎶ラ敊 浜嬩欢绫诲瀷锛屾槸鍚﹀啋娉★紝鏄惁闃绘娴忚鍣ㄧ殑榛樿琛屼负
aLink.download = "浜岀淮鐮�.png"
@@ -34,6 +38,45 @@
// aLink.dispatchEvent(evt);
aLink.click()
}
+function drawText() {
+ const canvas = canvasRef.value;
+ canvas.width = 350;
+ canvas.height = 350;
+ canvas.style.width = '350px';
+ canvas.style.height = '350px';
+ const ctx = canvas.getContext('2d');
+ ctx.fillStyle = "#fff"
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ let img = new Image();
+ img.src = query.value.imgUrl;
+ const text = info.value.companyName;
+
+ ctx.drawImage(img, 10, 0, 320, 320);
+ ctx.font = '20px Arial';
+ ctx.textAlign = 'center';
+ ctx.fillStyle = '#000';
+ wrapText(ctx, text, 180, 320, 350, 20)
+ }
+ function wrapText(context, text, x, y, maxWidth, lineHeight) {
+ var words = text.split('');
+ var line = '';
+ for(var n = 0; n < words.length; n++) {
+ var testLine = line + words[n] + ' ';
+ var metrics = context.measureText(testLine);
+ var testWidth = metrics.width;
+ if (testWidth > maxWidth && n > 0) {
+ context.fillText(line, x, y);
+ line = words[n] + ' ';
+ y += lineHeight;
+ }
+ else {
+ line = testLine;
+ }
+ }
+ if(line) {
+ context.fillText(line, x, y);
+ }
+}
function base64ToBlob(code) {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
--
Gitblit v1.9.1