如何在带背景图的Canvas上正确显示HTML内容？

我帮你排查了代码里的几个关键问题，你遇到的HTML显示过小、格式错乱，主要是SVG foreignObject的配置、XHTML规范以及编码方式导致的，咱们一步步来修复：

核心问题点 #

• SVG尺寸与foreignObject适配问题：原代码里给foreignObject设了固定像素宽高，但没有和容器正确适配，导致内容被压缩。
• XHTML格式与命名空间：虽然你加了XHTML命名空间，但SVG字符串的转义处理不够清晰，容易出现解析错误。
• 样式定位逻辑：右侧内容的float:right和position:absolute混用，加上宽度设置不合理，导致内容显示异常。

修正后的完整代码 #

var ctx; 
var targetImg; 
const base_image = new Image(); 
const {body} = document;
const canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = 722; 
canvas.height = 458;

base_image.src = 'https://imgur.com/1HTlrk1'; 
base_image.onload = function() { 
  ctx.drawImage(base_image, 0, 0, 722, 458); 
  startDraw(); 
}; 

function startDraw() { 
  // 用模板字符串构建SVG，避免转义混乱，更易维护
  const svgContent = `
    <svg xmlns="http://www.w3.org/2000/svg" width="722" height="458">
      <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
          <div style="position: relative; width: 722px; height: 458px; background-color: transparent;">
            <div style="position: absolute; left: 447px; top: 69px; width: 275px;">
              <h1>Buscamos</h1>
              <span>Team Leader</span>
              <div>
                La busqueda se orienta a <b>desarrolladores Especialistas en Salesforce</b><br/>
                con ingles avanzado y con experiencia en liderazgo de equipos
              </div>
              <table border="1" style="width:100%;">
                <tr><td>ANGULAR</td></tr>
              </table>
            </div>
          </div>
        </div>
      </foreignObject>
    </svg>
  `;

  const tempImg = document.createElement('img');
  tempImg.addEventListener('load', onTempImageLoad);
  // 清理多余空格后再编码，避免SVG解析错误
  tempImg.src = 'data:image/svg+xml,' + encodeURIComponent(svgContent.replace(/\s+/g, ' ').trim());
  
  targetImg = document.createElement('img');
  body.appendChild(targetImg);
} 

function onTempImageLoad(e){ 
  ctx.drawImage(e.target, 0, 0); 
  targetImg.src = canvas.toDataURL(); 
}

关键修改说明 #

1. 适配foreignObject尺寸：把foreignObject的宽高改为100%，让它完全填充SVG容器，避免内容被强制缩小。
2. 简化SVG构建方式：用ES6模板字符串代替拼接转义字符，代码更清晰，也减少了转义错误的概率。
3. 修复样式定位：去掉了冲突的float:right，保留position:absolute并以外层相对定位容器为基准，同时调整右侧内容宽度为275px，避免超出Canvas范围被截断。
4. 优化编码逻辑：清理SVG内容里的多余换行和空格后再编码，确保生成的data URI是有效的SVG格式。

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