html/woshishei.html

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 20px;
      margin: 0;
    }
  </style>
</head>

<body>
  <div style="display: flex;flex-wrap: wrap;gap: 12px;">
    <canvas id="wss" width="500" height="370"></canvas>
    <canvas id="pkq" width="500" height="370"></canvas>
    <div>
      <input type="file" onchange="handleImage(this)">
      <br>
      <input type="text" placeholder="我是谁" oninput="handleWss(this)">
      <br>
      <input type="text" placeholder="说明" oninput="handlePlaceholder(this)">
      <div>
        <button onclick="handleDownLoadWss(this)">下载第一张</button>
        <button onclick="handleDownLoadPkq(this)">下载第二张</button>
      </div>
    </div>
  </div>
  <script>
    // 我是谁
    const wss = document.querySelector('canvas#wss');
    const wssCtx = wss.getContext('2d');
    drawImage(wssCtx, '../assets/pkq4.png');

    // 皮卡丘
    const pkq = document.getElementById('pkq');
    const pkqCtx = pkq.getContext('2d');
    drawImage(pkqCtx, '../assets/pkq3.png');

    const handleWss = (e) => {
      drawText(pkqCtx, e.value, 292, 80)
    }

    const handlePlaceholder = (e) => {
      drawText(pkqCtx, e.value, 292, 140)
    }

    const handleImage = (e) => {
      const file = e.files[0];
      const fileReader = new FileReader();
      fileReader.onload = (e2) => {
        drawImage(pkqCtx, e2.target.result, 30, 30, 175, 200).then(() => {
          drawImage(pkqCtx, '../assets/pkq3.png');
        });
      }
      fileReader.readAsDataURL(file);
    }

    const handleDownLoadWss = () => {
      const url = wss.toDataURL();
      downLoad(url, '我是谁');
    }

    const handleDownLoadPkq = () => {
      const url = pkq.toDataURL();
      downLoad(url, '皮卡丘');
    }

    function drawText(ctx, text, x, y) {
      ctx.save();
      ctx.clearRect(x, y - 40, 500, 50);
      ctx.fillStyle = '#395980'
      ctx.fillRect(x, y - 40, 209, 50);
      ctx.beginPath();
      ctx.font = '30px 微软雅黑';
      ctx.fillStyle = '#d8f386'
      ctx.fillText(text, x, y);
      ctx.restore();
    }

    function drawImage(ctx, url, x = 0, y = 0, w = 500, h = 370) {
      return new Promise((resolve, reject) => {
        ctx.save();
        ctx.beginPath();
        const image = new Image();
        image.src = url;
        image.onload = () => {
          ctx.drawImage(image, x, y, w, h);
          ctx.restore();
          resolve(image);
        }
        image.onerror = reject;
      });
    }

    function downLoad(url, name) {
      const a = document.createElement('a');
      a.href = url;
      a.target = '_blank';
      a.download = name;
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      a.remove();
    }
  </script>
</body>

</html>