Html2Canvas截图清晰度

Question

使用[11:50:11] CLI version 2.0.1 [11:50:11] Local version 4.0.0 截取屏幕截图。并且该屏幕截图转换为图像并通过电子邮件附加。

这些屏幕截图包含html2canvas。有些时候x轴和y轴显示有一些阴影效果。我怎么能避免它？

highcharts

Answer 1

这可以帮助你解决问题

所有必要的是在使用html2canvas时设置dpi或scale选项，并且生成的画布应该具有您选择的dpi / scale。

function myRenderFunction(canvas) {
  destination.appendChild(canvas);
}

// Get source element and destination div.
var element = document.getElementById('element');
var destination = document.getElementById('destination');

// Normal html2canvas rendering.
html2canvas(element, {
    onrendered: myRenderFunction
});

// With dpi: 144 (scale: 1.5).
html2canvas(element, {
  dpi: 144,
    onrendered: myRenderFunction
});

// With scale: 2 (dpi: 192).
html2canvas(element, {
  scale: 2,
    onrendered: myRenderFunction
});

Answer 2

让我尝试评估我的评论并提出一些代码：

当我遇到这个问题时，解决了我的问题是当我开始玩html2canvas的选项时。 Here您可以找到可用的选项。如果您只想调用该函数，请使用html2canvas(element, options)。正如emran在他们的回答中建议的那样，你可以将一个对象作为第二个参数传递给html2canvas函数，该函数可以包含画布创建选项。尝试传递以下内容：

var options = {
  async : false, // setting it to false may slow the generation a bit down
  allowTaint : false, // I am not sure whether it helped or not but I remember setting it
  imageTimeout : 100, // this further delays loading, however this solved a similar issue for me
  foreignObjectRendering : true // it depends on the browser used whether it is allowed or not
}

然后你可以像emran建议的那样调用你的html2canvas函数，但是，由于较新版本的html2canvas与onrendered

一起使用，因此不再需要.then()

var element = document.getElementById('element');
var destination = document.getElementById('destination');

html2canvas(element, options).then(function(canvas) {
    destination.appendChild(canvas);
});

请注意，该页面上还有其他一些有趣的选项可能对您有用。我还可以就此主题提出this article建议，此explanation of the options和this library结合使用html2canvas和jsPDF进行直接HTML到PDF转换。