From cd95b584fe7da1ea63476871eabf512213a31e69 Mon Sep 17 00:00:00 2001
From: 王恒 <318726284@qq.com>
Date: 星期五, 18 七月 2025 17:42:03 +0800
Subject: [PATCH] '计划管理模块开发完成'
---
src/views/infomanger/companymanger/components/createQrcode.vue | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 55 insertions(+), 3 deletions(-)
diff --git a/src/views/infomanger/companymanger/components/createQrcode.vue b/src/views/infomanger/companymanger/components/createQrcode.vue
index 0df20e8..cc08bd0 100644
--- a/src/views/infomanger/companymanger/components/createQrcode.vue
+++ b/src/views/infomanger/companymanger/components/createQrcode.vue
@@ -1,18 +1,21 @@
<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 style="font-weight: bold;margin-bottom: 10px;">瀵熷幙鎵爜鍏ヤ紒鐩戠潱骞冲彴</div>
<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; display: none;"></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,15 +27,61 @@
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"
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
aLink.click()
+}
+function drawText() {
+ const canvas = canvasRef.value;
+ canvas.width = 350;
+ canvas.height = 380;
+ canvas.style.width = '350px';
+ canvas.style.height = '380px';
+ 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';
+ // ctx.setFontWeight('bold')
+ ctx.font ='bold 20px Arial'
+ wrapText(ctx, "瀵熷幙鎵爜鍏ヤ紒鐩戠潱骞冲彴", 180, 320, 350, 40)
+ // ctx.setFontWeight('normal')
+ ctx.font ="20px Arial"
+ wrapText(ctx, text, 180, 350, 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,')
@@ -49,4 +98,7 @@
openDialog,
closeDialog
})
-</script>
\ No newline at end of file
+</script>
+
+<style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.1