如何使用JavaScript结合文本与现有图片生成新图片？

你的代码里用appendChild给img元素加文本完全行不通——<img>是HTML自闭合的替换元素，它根本不能包含任何子节点，所以这种写法从根源上就不符合规范，自然看不到文本效果。

下面分两种常见场景给你解决办法：

场景1：仅在页面展示图片+文本（不需要生成新图片文件） #

用容器元素把图片和文本包裹起来，通过CSS定位让文本叠加在图片上即可，代码示例：

<body id="slshow_body" style="text-align: center;">
  <h2>Add new sliding image</h2>
  <!-- 用div作为容器包裹图片和文本 -->
  <div style="position: relative; display: inline-block;">
    <img name="simage1" id="simage1" src="http://127.0.0.1:3000/Brother TN-1040 toner.png" />
    <!-- 标题文本，定位在图片底部 -->
    <div id="imageTitle" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: white; background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 4px;"></div>
    <!-- 价格文本，定位在图片右上角 -->
    <div id="imagePrice" style="position: absolute; top: 10px; right: 10px; color: white; background: rgba(255,0,0,0.8); padding: 4px 8px; border-radius: 4px;"></div>
  </div>
  <br>
  <br>
  <a href="http://localhost:3000" type="button" class="homepg-btn">Çıkış/Ana sayfa</a>
  <script>
    window.addEventListener('load', () => { 
      document.getElementById('imageTitle').textContent = "Brother TN-1040 toner";
      document.getElementById('imagePrice').textContent = "Price: $100";
    })    
  </script>    
</body>

场景2：生成包含文本的新图片文件（可下载/保存） #

如果需要把图片和文本合并成一张独立的图片文件，得用HTML5 Canvas来实现，代码示例：

<body id="slshow_body" style="text-align: center;">
  <h2>Add new sliding image</h2>
  <!-- 用于合成图片的Canvas，默认隐藏 -->
  <canvas id="imageCanvas" style="display: none;"></canvas>
  <!-- 展示合成后的最终图片 -->
  <img id="resultImage" />
  <br>
  <br>
  <a href="http://localhost:3000" type="button" class="homepg-btn">Çıkış/Ana sayfa</a>
  <script>
    window.addEventListener('load', async () => {
      const canvas = document.getElementById('imageCanvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();
      // 本地图片无需跨域配置，若使用外部图片需确保对方开启CORS
      img.crossOrigin = 'anonymous';
      img.src = "http://127.0.0.1:3000/Brother TN-1040 toner.png";

      // 等待图片加载完成
      await new Promise(resolve => img.onload = resolve);
      
      // 设置Canvas尺寸和原图一致
      canvas.width = img.width;
      canvas.height = img.height;
      
      // 在Canvas上绘制原图
      ctx.drawImage(img, 0, 0);
      
      // 绘制标题文本：先画半透明背景，再写白色文字
      ctx.fillStyle = 'rgba(0,0,0,0.7)';
      ctx.fillRect(0, img.height - 30, img.width, 30);
      ctx.fillStyle = 'white';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText("Brother TN-1040 toner", img.width / 2, img.height - 10);
      
      // 绘制价格文本：直接用红色半透明背景的文字
      ctx.fillStyle = 'rgba(255,0,0,0.8)';
      ctx.font = '14px Arial';
      ctx.textAlign = 'right';
      ctx.fillText("Price: $100", img.width - 10, 30);
      
      // 将Canvas内容转为图片URL，展示到页面
      const resultUrl = canvas.toDataURL('image/png');
      document.getElementById('resultImage').src = resultUrl;
      
      // 如果需要下载合成后的图片，可取消下面注释
      // const downloadLink = document.createElement('a');
      // downloadLink.href = resultUrl;
      // downloadLink.download = 'toner_with_text.png';
      // downloadLink.click();
    })    
  </script>    
</body>

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