如何在页面加载时显示#outputText与#imageContainer的空框或自定义字母预览

要解决页面加载时#outputText和#imageContainer无内容的问题，可通过两种方式实现：添加视觉占位框，或直接展示自定义字母的预览效果，以下是具体修改方案：

方案1：显示空框占位 #

这种方式给两个容器添加基础样式，让页面加载时就有清晰的视觉区域，同时生成空白背景的图片容器。

修改后的CSS #

body {
  text-align: center;
  margin-top: 100px;
}

#inputText {
  font-size: 24px;
  padding: 10px;
}

#outputText {
  font-family: "Courier New", Courier, monospace;
  font-size: 48px;
  margin-top: 20px;
  /* 添加空框样式 */
  border: 1px solid #ccc;
  min-height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

#imageContainer {
  margin-top: 20px;
  /* 添加空框样式 */
  border: 1px solid #ccc;
  min-height: 80px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  margin-top: 20px;
}

.option {
  margin-top: 10px;
}

修改后的JavaScript #

在$(document).ready末尾直接调用generateFont()，同时处理空文本时的图片生成逻辑：

$(document).ready(function() {
  const inputText = $('#inputText');
  const outputText = $('#outputText');
  const imageContainer = $('#imageContainer');
  const fontSizeInput = $('#fontSize');
  const fontColorInput = $('#fontColor');
  const backgroundColorInput = $('#backgroundColor');
  const fontWeightSelect = $('#fontWeight');
  const downloadButton = $('#downloadButton');
  const copyButton = $('#copyButton');
  inputText.on('input', generateFont);
  fontSizeInput.on('input', generateFont);
  fontColorInput.on('input', generateFont);
  backgroundColorInput.on('input', generateFont);
  fontWeightSelect.on('change', generateFont);
  downloadButton.on('click', downloadImage);
  copyButton.on('click', copyText);

  // 页面加载时立即执行一次，生成空框/空白图片
  generateFont();

  function generateFont() {
    const text = inputText.val();
    const transformedText = transformText(text);
    outputText.text(transformedText);

    generateImage(transformedText);
  }

  function transformText(text) {
    const alphabet = {
      'A': 'Λ',
      'B': 'ß',
      'C': 'Ͼ',
      'D': 'Ð',
      'E': 'Σ',
      'F': 'Ŧ',
      'G': '₲',
      'H': 'Ή',
      'I': 'ł',
      'J': 'J',
      'K': 'Ҝ',
      'L': 'Ł',
      'M': 'M',
      'N': 'И',
      'O': 'Ø',
      'P': '₱',
      'Q': 'Q',
      'R': 'S',
      'S': 'Ş',
      'T': 'Ŧ',
      'U': 'Ц',
      'V': 'V',
      'W': '₩',
      'X': 'Ж',
      'Y': 'Ψ',
      'Z': 'Z'
    };

    const transformedText = text
      .toUpperCase()
      .split('')
      .map((char) => (alphabet.hasOwnProperty(char) ? alphabet[char] : char))
      .join('');

    return transformedText;
  }

  function generateImage(text) {
    const canvas = $('<canvas>')[0];
    const context = canvas.getContext('2d');
    const fontSize = parseInt(fontSizeInput.val());
    const fontColor = fontColorInput.val();
    const backgroundColor = backgroundColorInput.val();
    const fontWeight = fontWeightSelect.val();

    // 处理空文本情况，设置最小画布尺寸
    let textWidth = context.measureText(text).width;
    let textHeight = fontSize;
    if (!text) {
      textWidth = 300;
      textHeight = 80;
    }

    canvas.width = textWidth;
    canvas.height = textHeight;

    context.fillStyle = backgroundColor;
    context.fillRect(0, 0, canvas.width, canvas.height);

    if (text) {
      context.fillStyle = fontColor;
      context.font = `${fontWeight} ${fontSize}px "Courier New", Courier, monospace`;
      context.textBaseline = 'middle';
      context.fillText(text, 0, canvas.height / 2);
    }

    const imageElement = $('<img>').attr('src', canvas.toDataURL('image/png'));
    imageContainer.html(imageElement);
  }

  function downloadImage() {
    const imageElement = imageContainer.find('img')[0];
    const link = $('<a>').attr('href', imageElement.src).attr('download', 'cool_font.png')[0];
    link.click();
  }

  function copyText() {
    const transformedText = outputText.text();
    navigator.clipboard.writeText(transformedText)
      .then(() => {
        alert('Text copied to clipboard!');
      })
      .catch((error) => {
        console.error('Error copying text to clipboard:', error);
      });
  }
});

方案2：显示自定义字母预览 #

如果希望页面加载时直接展示自定义字母的示例效果，修改generateFont()的初始化调用逻辑，传入预设的预览文本：

修改JavaScript中的初始化调用 #

将原来的generateFont()替换为：

// 页面加载时传入预览文本，展示自定义字母效果
inputText.val("ABCDE");
generateFont();
// 清空输入框，不影响用户后续输入
inputText.val("");

这样页面加载时会先生成"ABCDE"对应的转换文本和图片，然后清空输入框，既展示了预览效果，又不干扰用户操作。

内容的提问来源于stack exchange，提问作者Avanish Paswan