《Nuxt.js 实战：从放弃到入门》六、打造个性化文字转图片工具

​​

在当今短视频的时代，将文字转化为图片是一个常见且实用的需求，无论是用于社交媒体分享、设计宣传材料，还是制作个性化的视觉内容。今天，我们就来深入剖析一个使用 Vue 3 和 ElementPlus 构建的文字转图片工具的代码，了解它是如何实现丰富的自定义功能以及图片生成和下载。

整体功能概述

这个工具提供了一个直观的界面，允许用户输入文本，并对生成图片的多个方面进行个性化设置，包括字体样式、大小、颜色，背景颜色、图片尺寸、水印设置和边距设置等。用户设置完成后，可以点击 “生成图片” 按钮，工具会将输入的文本按照预览的样式生成图片，并以 ZIP 文件的形式下载。

代码结构与组件分析

表单输入区域

用户可以在这里输入要转换的文本内容，并对字体样式、大小、颜色，背景颜色、图片尺寸、水印设置和边距设置等进行调整。例如：

<el-form label-width="100px">
  <el-form-item label="文本内容">
    <el-input
      v-model="text"
      type="textarea"
      :rows="4"
      placeholder="请输入要转换的文本内容"
      class="input-text"
    />
  </el-form-item>
  <!-- 其他表单项... -->
</el-form>

预览区域

实时展示根据用户设置生成的图片预览效果，方便用户在生成图片前进行确认。

<div class="preview-container-wrapper">
  <div v-for="(page, index) in pages" :key="index" class="preview-container" :style="previewStyle(index)">
    <div ref="textCanvas" class="text-canvas" :style="textStyle(index)">
      {{ page || '预览效果' }}
      <div class="watermark" :style="watermarkStyle()">{{ watermarkText }}</div>
    </div>
  </div>
</div>

操作按钮

提供 “生成图片” 按钮，点击后触发图片生成和下载操作。

<el-button type="primary" @click="generateImage" :disabled="!text" class="generate-button">
  生成图片
</el-button>

状态定义

使用 ref​ 定义了多个响应式状态，用于存储用户输入的文本、字体样式、背景设置等信息。

const text = ref('')
const fontFamily = ref('Arial')
const fontSize = ref(14)
// 其他状态...

样式计算

通过 computed​ 或普通函数计算预览区域和文本的样式，确保预览效果与用户设置一致。

const previewStyle = (index) => {
  const sizes = {
    square: { width: '400px', height: '400px' },
    portrait: { width: '400px', height: '500px' },
    story: { width: '400px', height: '711px' }
  }

  return {
    ...sizes[imageSize.value],
    margin: '20px auto',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    borderRadius: '8px',
    boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
    position: 'relative',
    paddingBottom: `${padding.value.bottom}px`,
    '--background-color': backgroundColor.value,
    '--background-image': backgroundImage.value ? 
      (backgroundImage.value.startsWith('data:') ? 
        `url(${backgroundImage.value})` : 
        backgroundImage.value) : 
      'none',
    '--background-opacity': backgroundImage.value ? backgroundOpacity.value : 1
  }
}

分页处理

​calculatePages​ 函数根据用户输入的文本和设置的图片尺寸、边距等信息，将文本进行分页处理，确保文本能够在图片中正确显示。

const calculatePages = () => {
  // 计算有效区域宽度和高度
  const effectiveWidth = 400 - (padding.value.left + padding.value.right + 40);
  const effectiveHeight = {
    square: 400,
    portrait: 500,
    story: 711
  }[imageSize.value] - (padding.value.top + padding.value.bottom + 40);

  const lineHeight = fontSize.value * 1.8;
  const charsPerLine = Math.floor(effectiveWidth / (fontSize.value * 0.6));
  const linesPerPage = Math.floor(effectiveHeight / lineHeight);
  const paragraphs = text.value.split('\n');
  let pagesContent = [];
  let currentPage = '';
  let currentLineCount = 0;
  let isFirstParagraph = true;

  paragraphs.forEach(paragraph => {
    // 处理段落和换行
    // ...
  });

  // 处理最后一页
  if (currentPage.trim()) {
    pagesContent.push(currentPage.trim());
  }

  pages.value = pagesContent.length > 0 ? pagesContent : ['预览效果'];
}

图片生成与下载

​generateImage​ 函数使用 html2canvas​ 库将预览区域的 HTML 元素转换为图片，并使用 JSZip​ 库将生成的图片打包成 ZIP 文件进行下载。

​​

const generateImage = async () => {
  if (!textCanvas.value || pages.value.length === 0) return;

  try {
    const zip = new JSZip();
    const images = zip.folder('images');

    const previewContainers = document.querySelectorAll('.preview-container');
    for (let i = 0; i < pages.value.length; i++) {
      await new Promise(resolve => setTimeout(resolve, 100));

      const canvas = await html2canvas(previewContainers[i], {
        backgroundColor: backgroundColor.value,
        scale: 2
      });

      const base64Data = canvas.toDataURL('image/png').split(',')[1];
      images.file(`text-image-${i + 1}.png`, base64Data, { base64: true });
    }

    const content = await zip.generateAsync({ type: 'blob' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(content);
    link.download = 'text-images.zip';
    link.click();
    URL.revokeObjectURL(link.href);

    ElMessage.success('图片生成成功');
  } catch (error) {
    console.error('生成图片失败:', error);
    ElMessage.error('生成图片失败，请重试');
  }
}

头部添加链接

在Header.vue中添加新建的功能，如下

<el-col :span="4">
          <el-menu mode="horizontal" router :ellipsis="false">
            <el-menu-item index="/resize">
              <span>图片缩放</span>
            </el-menu-item>
            <el-menu-item index="/compress">
              <span>图片压缩</span>
            </el-menu-item>
            <el-menu-item index="/divide">
              <span>图片分割</span>
            </el-menu-item>
            <el-menu-item index="/crop">
              <span>图片裁剪</span>
            </el-menu-item>
            <el-menu-item index="/text2image">
              <span>文字转图片</span>
            </el-menu-item>
          </el-menu>
        </el-col>

​​

功能亮点与使用技巧

丰富的自定义选项

用户可以根据自己的需求对字体、颜色、背景、水印等进行个性化设置，生成独具特色的图片。

​​

实时预览

在输入文本和调整设置的过程中，预览区域会实时更新，让用户随时了解最终的图片效果。

​​

多页处理

对于较长的文本，工具会自动进行分页处理，确保文本能够完整地显示在图片中。

​​

图片下载

点击 “生成图片” 按钮后，工具会将生成的图片打包成 ZIP 文件进行下载，方便用户保存和使用。

​​

总结

通过对这个文字转图片工具的代码分析，我们可以看到如何使用 Vue 3 和 ElementPlus 构建一个功能丰富、用户友好的前端应用。同时，借助 html2canvas​ 和 JSZip​ 等库，实现了 HTML 元素到图片的转换和图片的打包下载功能。这个工具不仅可以满足日常的文字转图片需求，还可以作为一个基础模板，进行进一步的扩展和定制。

希望这篇文章能够帮助你理解代码的实现原理，并在实际项目中应用相关技术。如果你对代码有任何疑问或建议，欢迎留言讨论！

代码托管地址：https://github.com/outeasy/outeasy/releases/tag/v0.6
最终预览效果
‍