1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
| <template> <div> <h1>输入文字生成文字 logo</h1> <input v-model="companyName" type="text" placeholder="请输入文字"> <button @click="generateLogo">生成 logo</button> <button @click="downloadLogo">下载 logo</button> <div id="logo" ref="logoRef" :style="{ backgroundColor: logoBgColor }">{{ logoText }}</div>
<h1>输入信息生成二维码</h1> <input v-model="companyName2" type="text" placeholder="请输入title"> <br /> <textarea v-model="address" placeholder="请输入信息" cols="22" rows="5"></textarea> <br /> <button @click="generateQRCode">生成二维码</button> <div id="qrcode" v-html="qrcodeHtml"></div> <div id="companyNameDisplay">{{ companyName2 }}</div> </div> </template>
<script lang="ts" setup> import { ref, type Ref } from 'vue'; // 假设 qrcode.min.js 已经安装并导入 import QRCode from 'qrcode-generator';
// 定义响应式变量的类型 const companyName: Ref<string> = ref(''); const logoText: Ref<string> = ref(''); const logoBgColor: Ref<string> = ref(''); const companyName2: Ref<string> = ref(''); const address: Ref<string> = ref(''); const qrcodeHtml: Ref<string> = ref(''); const logoRef: Ref<HTMLElement | null> = ref(null);
const generateLogo = () => { if (companyName.value.length === 4) { logoText.value = `${companyName.value.slice(0, 2)}\n${companyName.value.slice(2)}`; } else { logoText.value = companyName.value; } const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16); logoBgColor.value = randomColor; };
const downloadLogo = async () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const text = logoText.value; const color = logoRef.value?.style.backgroundColor || '';
canvas.width = 2048; canvas.height = 2048;
// 设置字体样式,与页面上的 logo 字体大小一致 if (ctx) { ctx.font = '748px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
// 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制带圆角的背景 const radius = 200; const x = 0; const y = 0; const width = 2048; const height = 2048;
ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); ctx.quadraticCurveTo(x + width, y, x + width, y + radius); ctx.lineTo(x + width, y + height - radius); ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); ctx.lineTo(x + radius, y + height); ctx.quadraticCurveTo(x, y + height, x, y + height - radius); ctx.lineTo(x, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); ctx.closePath();
ctx.fillStyle = color; ctx.fill();
// 设置文字颜色 ctx.fillStyle = 'white';
// 计算文字位置 const centerX = canvas.width / 2; const centerY = canvas.height / 2;
// 绘制文字 if (text.includes('\n')) { const lines = text.split('\n'); const lineHeight = 748; const totalHeight = lines.length * lineHeight; const startY = centerY - totalHeight / 2 + lineHeight / 2; lines.forEach((line, index) => { ctx.fillText(line, centerX, startY + index * lineHeight); }); } else { ctx.fillText(text, centerX, centerY); } }
// 创建下载链接 const link = document.createElement('a'); link.href = canvas.toDataURL('image/png'); link.download = companyName.value + 'logo.png'; link.click(); };
const generateQRCode = () => { qrcodeHtml.value = ''; if (address.value) { QRCode.stringToBytes = QRCode.stringToBytesFuncs['UTF-8']; const qr = QRCode(0, 'L'); qr.addData(address.value); // qr.addData(unescape(encodeURIComponent(address))); qr.make(); qrcodeHtml.value = qr.createImgTag(4); } }; </script>
<style scoped> body { font-family: Arial, sans-serif; text-align: center; padding-top: 50px; }
#logo { font-size: 48px; font-weight: bold; margin-top: 20px; padding: 10px; border-radius: 20px; color: white; white-space: pre-line; width: 200px; height: 200px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; margin-left: auto; margin-right: auto; }
#qrcode { margin-top: 20px; } </style>
|