From 3c496c263fca58417fa9b35beb9707ad147e6c7d Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期一, 22 七月 2024 15:01:33 +0800
Subject: [PATCH] Merge branch 'main' of http://218.28.192.34:9999/r/sqys/sqys_web
---
src/views/infomanger/infoLook/components/createQrcode.vue | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 105 insertions(+), 0 deletions(-)
diff --git a/src/views/infomanger/infoLook/components/createQrcode.vue b/src/views/infomanger/infoLook/components/createQrcode.vue
new file mode 100644
index 0000000..87aa2da
--- /dev/null
+++ b/src/views/infomanger/infoLook/components/createQrcode.vue
@@ -0,0 +1,105 @@
+<template>
+ <el-dialog title="浜岀淮鐮�" v-model="dialogVisible" width="300px" @close="closeDialog">
+ <div class="text-center">
+ <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) {
+ // console.log(row)
+ info.value = row
+ dialogVisible.value = true
+}
+function closeDialog() {
+ 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(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,')
+ let contentType = parts[0].split(':')[1]
+ let raw = window.atob(parts[1])
+ let rawLength = raw.length
+ let uInt8Array = new Uint8Array(rawLength)
+ for (let i = 0; i < rawLength; ++i) {
+ uInt8Array[i] = raw.charCodeAt(i)
+ }
+ return new Blob([uInt8Array], {type: contentType})
+ }
+defineExpose({
+ openDialog,
+ closeDialog
+})
+</script>
+
+<style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.1