如何让Canvas动态适配HTML内容尺寸，消除多余空白？

我有一段将SVG绘制到Canvas的代码，运行正常但生成的图片远大于实际HTML内容尺寸，存在大量多余空白。需要让图片/Canvas仅渲染HTML内容，消除多余空白。

原代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <style>
      #imgNode {
        border: "10px dotted black";
      }
    </style>
  </head>
  <img id="imgNode" style="border: 1px dotted black"></img>
  <body>
    <script>
      const { body } = document;

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      const tempImg = document.createElement("img");
      tempImg.addEventListener("load", onTempImageLoad);
      tempImg.src =
        "data:image/svg+xml," +
        encodeURIComponent(
          '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>'
        );

      const targetImg = document.querySelector("#imgNode")

      function onTempImageLoad(e) {
        ctx.drawImage(e.target, 0, 0);
        targetImg.src = canvas.toDataURL();
      }
    </script>
  </body>
</html>

解决思路 #

核心问题是SVG和Canvas的尺寸未匹配HTML内容的实际大小，需先计算HTML内容的真实尺寸，再同步设置SVG、Canvas的尺寸。

修改后的代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <style>
      #imgNode {
        border: 1px dotted black;
      }
      /* 临时容器用于计算尺寸，隐藏不显示 */
      #tempContainer {
        position: absolute;
        visibility: hidden;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <img id="imgNode"></img>
    <!-- 临时容器，用来渲染HTML内容获取真实尺寸 -->
    <div id="tempContainer">
      <style>em{color:red;}</style>
      <em>I</em> lick <span>cheese</span>
    </div>
    <script>
      const tempContainer = document.querySelector('#tempContainer');
      // 获取HTML内容的实际宽高
      const contentWidth = tempContainer.offsetWidth;
      const contentHeight = tempContainer.offsetHeight;

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      // 设置Canvas尺寸匹配内容
      canvas.width = contentWidth;
      canvas.height = contentHeight;

      const tempImg = document.createElement("img");
      tempImg.addEventListener("load", onTempImageLoad);
      // 修改SVG的width和height为内容实际尺寸，而非100%
      tempImg.src =
        "data:image/svg+xml," +
        encodeURIComponent(
          `<svg xmlns="http://www.w3.org/2000/svg" width="${contentWidth}" height="${contentHeight}"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>`
        );

      const targetImg = document.querySelector("#imgNode")

      function onTempImageLoad(e) {
        ctx.drawImage(e.target, 0, 0, contentWidth, contentHeight);
        targetImg.src = canvas.toDataURL();
        // 移除临时容器
        tempContainer.remove();
      }
    </script>
  </body>
</html>

关键修改点 #

• 添加临时隐藏容器：先在页面中渲染要转换的HTML内容，通过offsetWidth和offsetHeight获取其真实尺寸，避免SVG因设置100%尺寸而继承容器的默认大尺寸。
• 同步设置SVG尺寸：将SVG的width和height从100%改为获取到的内容实际尺寸，确保SVG仅包裹HTML内容。
• 匹配Canvas尺寸：把Canvas的宽高设置为内容的真实尺寸，绘制时也指定对应尺寸，避免Canvas默认宽高（300x150）或过大尺寸导致的空白。
• 移除临时容器：获取尺寸后可删除临时容器，不影响页面。

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