html-to-image javascript npm 包未显示弯曲文本

Question

将 HTML 转换为 PNG 时，它不显示弯曲文本

这是使用 Anycharts Any Charts

制作的

  htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });

但输出不显示弯曲文本。

在任何其他文本不弯曲的图表上，它都可以正常工作。

Answer 1

您遇到的问题可能是由第三方库引起的。 AnyChart 提供了一种以首选图像格式下载图表的解决方案。

使用 saveAsPng 方法将图表保存为 png 图像。

//Create a chart instance
var chart = anychart.sunburst(data, "as-tree");

//Set transparent background
chart.background().fill("transparent");

//Download an image
chart.saveAsPng({
      width: 500,
      height: 500,
      quality: 0.3,
      filename: "My Chart PNG",
    });

结果图如下：

您可以查看 如何在游乐场中将 cahrt 保存为图像

Answer 2

你是如何拍摄这张照片的？我正在使用试用版并遇到问题，我认为这是因为它尝试访问图表上徽标的 CSS，这会导致 CORS 错误。我熟悉 Anycharts 提供的

saveAsPng

 方法，但我的用例要求我一次拍摄多张图像，使用 

HTML-to-text

 包更容易做到这一点。