将HTML转换为图像时如何显示图像答案

【问题标题】：How to display image when converting HTML to image将HTML转换为图像时如何显示图像
【发布时间】：2020-07-26 20:42:59
【问题描述】：

我已经使用下面的代码成功地将 html 转换为图像，但是字体正在改变并且图像没有显示在图像上。

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
    <div id="div_card"  style="border-color:grey;border-style:solid;border-width:1px;width:600px; height:450px; padding:15px;margin-left:40px">
					  <div style="display:inline-block;height:20px;"> <div id="sp_name"> Author:John Michael Smith Junior</div></div><br>
					  <div style="display:inline-block;height:120px; width: 120px; float:right"> 
								  <img src="htmlimage.jpg" style="height:120px; width: 120px"> </div>
					  <div style="display:inline-block;height:20px;"><div> Published on March 1982 </div></div><br>
					  <div style="display:inline-block;height:20px;"> <div> Published by: Mark Vin book house</div></div><br>
					  <div style="display:inline-block;height:20px;"> <div>Last Edition Dec 1999</div></div><br>
					  <div style="display:inline-block;height:20px;"> <div>Sold Copies: 150000</div></div><br>				  
				</div>
    <a id="btn-Convert-Html2Image" href="#">Download</a>
    <br />
    <div id="previewImage" style="display: none;">
    </div>

    <script>
        $(document).ready(function () {
            var element = $("#div_card"); // global variable
            var getCanvas; // global variable

            html2canvas(element, {
                onrendered: function (canvas) {
                    $("#previewImage").append(canvas);
                    getCanvas = canvas;
                }
            });

            $("#btn-Convert-Html2Image").on('click', function () {
                var imgageData = getCanvas.toDataURL("image/png");
                // Now browser starts downloading it instead of just showing it
                var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
            });
        });

    </script>
</body>
</html>

我需要在不改变字体的情况下获取图像。我该怎么做？？？？？？

【问题讨论】：

世界上没有人回复

标签： javascript jquery html html5-canvas

【解决方案1】：

画布不需要像图片

有很多方法可以将画布转换为图像。但是，为什么要麻烦，因为画布的行为就像图像一样。只需将画布显示为图像即可。

当代html2canvas用法示例，将捕获的画布添加到页面

html2canvas(document.body).then(canvas => document.body.appendChild(canvas));

使用你的例子

注意安全性阻止它在 SO sn-p 中工作。

addEventListener("load",() => {
    html2canvas(divCard)
      .then(can => {
          // show result of html2canvas
          previewImage.classList.remove("hide");
          previewImage.appendChild(can);

          // show download link and add data url for download.
          downloadLink.classList.remove("hide");
          downloadLink.download = "canvasCap.png";  // name the download file
          downloadLink.href = can.toDataURL("image/png").replace("data:image/png", "data:application/octet-stream");
      })
      .catch(error => {
          previewImage.textContent = "html2canvas error: " + error.message;
          previewImage.classList.remove("hide");
          previewImage.classList.add("error");
      });
});

* { font-family: arial }
.hide { display: none }
.error {color: red }
.titile {font-size: x-large}
#divCard {
  border: 2px solid black;
  padding: 4px;
}

<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>

<div id="divCard">
  <div class="titile">Author:John Michael Smith Junior</div>
  <div>Published on March 1982 </div>
  <div>Published by: Mark Vin book house</div>
  <div>Last Edition Dec 1999</div>
  <div>Sold Copies: 150000</div>
</div>
<h4>HTML2CANVAS result...</h4>
<a id="downloadLink" class="hide">download</a>
<div class="hide" id="previewImage"></div>

_{^{顺便说一句，它的 2020.. jQuery 是缓慢臃肿的包袱。 Windows 于今年 1 月 31 日结束了对 IE}}

【讨论】：

【解决方案2】：

这是我想出的解决方案。它允许在输出图像中正确包含远程和自定义字体。它需要最新版本的 Chrome：

在 Chrome 中打开 HTML 页面（您希望转换为图像）。
右键单击显示页面背景中的任意位置，然后选择“另存为”。
在“另存为”对话框中，为“网页，单个文件 (*.mhtml)”选择“另存为类型”选项，然后选择要另存为的文件夹和文件名。这会将 HTML 转换为 MHTML 并将其保存在本地。文件大小将巨大，因为它包含文件中的所有自定义字体和可能的静态图像。
转到本地机器的命令行 shell，使用无头 Chrome 将本地保存的 .mhtml 文件截屏为 PNG 文件。

例如，如果您的机器是 Windows 10，则本地保存的文件是“C:\tmp\page.mhtml”，并且是 16x16 图像，使用：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --screenshot=C:\tmp\page.png --window-size=" 16,16" --default-background-color=0 file:///C/tmp/page.mhtml

这会将呈现的 HTML 页面的左上角 16x16 窗口保存为 PNG 文件，位于：C:\tmp\image.png。

【讨论】：