html2canvas 图标问题答案

【问题标题】：html2canvas issue with iconshtml2canvas 图标问题
【发布时间】：2017-12-16 14:26:05
【问题描述】：

您好，我正在尝试在 html2canvas 的帮助下打印带有一些图标的笔记列表的 div。

见上图是我的输入图像。

但我得到了这个输出。如果有人请帮帮我

    .icon-circle:before {
      content: "\e941";
    }

<div style="position: relative; border-bottom: 1px solid #cecece; display: table-cell; vertical-align: middle; width: 85px; padding:5px 0;"> 
  <i class="icon-circle" style="color:"blue">
     <span style="color: white;font-size: 18px;position: absolute; top: 22px;left: 13px;"> T
     </span>
   </i>
</div>

有什么办法

【问题讨论】：

我认为你的问题是图标上的绝对位置。为什么定位绝对？尝试相对定位，避免转换时出现计算问题。
谢谢@MarcosPérezGude 是的，这是因为位置，但是我如何在不给它位置的情况下获得该图标上方的文本我也尝试了绝对但它给了我与上面相同的结果。
它的问题将是 html2canvas 0.5.0-alpha1。我已经在github上报告了，你可以在github上看到我的小提琴和其他细节github.com/niklasvh/html2canvas/issues/1001
给图标的相对位置和图标的相对跨度。轻松

标签： javascript html twitter-bootstrap html2canvas

【解决方案1】：

终于在 html2canvas 的新版本 1.1 中我得到了解决方案 #1001。

这里是fiddle

window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
        width:320,
        height:220
    }).then(function (canvas) {
       document.body.appendChild(canvas);
   });
}

【讨论】：