文字生成图片_

继上一篇博客使用的python，这里给出一个本地的html网页。保存文html文件双击打开即可使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字转图片</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .container {
      display: flex;
      flex-direction: row;
    }

    .options {
      flex: 1;
      padding: 20px;
    }

    .preview {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .image-container {
      position: relative;
      width: 512px;
      height: 512px;
      border: 2px solid #000;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="options">
        <el-form :model="form" label-width="80px">
          <el-form-item label="文字内容">
            <el-input v-model="form.text" @input="generateImage"></el-input>
          </el-form-item>
          <el-form-item label="文字字体">
            <el-select v-model="form.fontFamily" @change="generateImage">
              <el-option v-for="font in fonts" :key="font" :label="font" :value="font"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文字字重">
            <el-select v-model="form.fontWeight" @change="generateImage">
              <el-option v-for="weight in weights" :key="weight" :label="weight" :value="weight"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文字大小">
            <el-slider v-model="form.fontSize" :min="20" :max="512" show-input @input="generateImage"></el-slider>
          </el-form-item>
          <el-form-item label="旋转角度">
            <el-slider v-model="form.rotate" :min="0" :max="360" show-input @input="generateImage"></el-slider>
          </el-form-item>
          <el-form-item label="文字颜色">
            <el-color-picker v-model="form.textColor" @change="generateImage"></el-color-picker>
          </el-form-item>
          <el-form-item label="背景颜色">
            <el-color-picker v-model="form.backgroundColor" @change="generateImage"></el-color-picker>
          </el-form-item>

        </el-form>
      </div>
      <div class="preview">
        <div class="image-container">
          <canvas id="canvas" width="512" height="512"></canvas>
          <div class="draggable-text" :style="{ fontSize: form.fontSize + 'px', color: form.textColor }" ref="draggableText">{{ form.text }}</div>
        </div>
      </div>

    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        form: {
          text: '秋',
          fontFamily: 'Arial',
          fontWeight: 'normal',
          fontSize: 80,
          textColor: '#000000',
          backgroundColor: '#ffffff',
          rotate: 0
        },
        fonts: ['Arial', 'Verdana', 'Helvetica', 'Times New Roman', 'SimSun', 'SimHei', 'Microsoft YaHei', 'KaiTi'],
        weights: ['normal', 'bold']
      },
      mounted() {
        this.generateImage();
      },
      methods: {
        generateImage() {
          const canvas = document.getElementById('canvas');
          const context = canvas.getContext('2d');
          const { text, fontFamily, fontWeight, fontSize, textColor, backgroundColor, rotate } = this.form;

          // 清空画布
          context.clearRect(0, 0, canvas.width, canvas.height);

          // 设置背景色
          context.fillStyle = backgroundColor;
          context.fillRect(0, 0, canvas.width, canvas.height);

          // 设置文字样式
          context.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
          context.fillStyle = textColor;
          context.textAlign = 'center';
          context.textBaseline = 'middle';

          // 计算文字位置
          const x = canvas.width / 2;
          const y = canvas.height / 2;

          // 绘制文字
          context.translate(x, y);
          context.rotate((rotate * Math.PI) / 180);
          context.fillText(text, 0, 0);

          // 恢复画布状态
          context.rotate((-rotate * Math.PI) / 180);
          context.translate(-x, -y);

          // 预览图片
          const preview = new Image();
          preview.src = canvas.toDataURL();
          preview.style.maxWidth = '100%';
          preview.style.maxHeight = '100%';
          const previewContainer = document.getElementById('preview-container');
          previewContainer.innerHTML = '';
          previewContainer.appendChild(preview);
        }
      }
    });
  </script>
</body>
</html>
云深处

继上一篇博客使用的python，这里给出一个本地的html网页。保存文html文件双击打开即可使用

参与讨论
