无星的前端之旅（三十二）——信息生成二维码让微信能够扫码识别复制粘贴.md

背景

有一些信息需要生成二维码，让微信能够扫码识别复制粘贴

vue版本

<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>

html版本

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成文字 logo</title>
    <style>
        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>
    <!-- 引入 qrcode.js 库 -->
    <script src="qrcode.min.js"></script>
</head>

<body>
    <h1>输入文字生成文字 logo</h1>
    <input type="text" id="companyName" placeholder="请输入文字名称">
    <button onclick="generateLogo()">生成 logo</button>
    <button id="downloadButton" onclick="downloadLogo()">下载 logo</button>
    <div id="logo"></div>

    <!-- 新增输入框和按钮用于生成二维码 -->
    <h1>输入信息生成二维码</h1>
    <input type="text" id="companyName2" placeholder="请输入title">
    <br />
    <textarea type="text" id="address" placeholder="请输入信息" cols="22" rows="5"></textarea>
    <br />

    <button onclick="generateQRCode()">生成二维码</button>
    <div id="qrcode"></div>
    <div id="companyNameDisplay"></div>

    <script>
        function generateLogo() {
            const companyName = document.getElementById('companyName').value;
            const logoElement = document.getElementById('logo');
            if (companyName.length === 4) {
                logoElement.textContent = `${companyName.slice(0, 2)}\n${companyName.slice(2)}`;
            } else {
                logoElement.textContent = companyName;
            }
            const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            logoElement.style.backgroundColor = randomColor;
        }

        function downloadLogo() {
            const canvas = document.getElementById('logoCanvas');
            const ctx = canvas.getContext('2d');
            const logoElement = document.getElementById('logo');
            const text = logoElement.textContent;
            const color = logoElement.style.backgroundColor;

            // 设置字体样式，与页面上的 logo 字体大小一致
            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 + 'logo.png';
            link.click();
        }

        function generateQRCode() {
            const address = document.getElementById('address').value;
            const qrcodeDiv = document.getElementById('qrcode');
            const companyName2 = document.getElementById('companyName2').value;
            const companyNameDisplay = document.getElementById('companyNameDisplay');
            qrcodeDiv.innerHTML = '';
            companyNameDisplay.textContent = '';


            if (address) {
                qrcode.stringToBytes = qrcode.stringToBytesFuncs['UTF-8'];
                const qr = qrcode(0, 'L');
                qr.addData(address);
                // qr.addData(unescape(encodeURIComponent(address)));
                qr.make();
                const img = qr.createImgTag(4);
                qrcodeDiv.innerHTML = img;
            }
            if (companyName2) {
                companyNameDisplay.textContent = companyName2;
            }
        }

    </script>
</body>

</html>