javascript - 文本背景不适用于 html2canvas

Question

我正在尝试使用 Html2Canvas 从我的 Div 生成图片，但它工作不正常，问题是我的文本背景。您可以在这里看到:

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

#example4 {
  display: block;
  font-size: 60px;
  color: rgb(0, 0, 0);
  font-family: Arial;
  background: -webkit-linear-gradient(top, rgb(213, 11, 27), rgb(28, 79, 145));
  -webkit-text-stroke-width: 0px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="est1" style="display: block;">
  <h3 id="example4" data-text="Test" class="tt">Test</h3>
</div>
<button onclick="takeScreenShot()">to image</button>

我有一个文本背景样式，它可以很好地显示文本，但是如果您单击到图像，html2canvas 会生成带有黑色文本和错误背景的图片。

如何使用 html2canvas 生成正确的图片？

Answer 1

尝试使用CSS作为内联，你可以使用html2canvas生成正确的图片。

<h3 data-text="Test" class="tt" style="display: block; font-size: 60px;color: rgb(0, 0, 0); font-family: Arial;background: -webkit-linear-gradient(top, rgb(213, 11, 27), rgb(28, 79, 145));-webkit-text-stroke-width: 0px; -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Test</h3>