javascript - Html2Canvas 截图清晰度

Question

使用html2canvas来截取屏幕截图。该屏幕截图已转换为图像并附在电子邮件中。

这些屏幕截图包括 highcharts。有时x轴和y轴显示有一些阴影效果。我怎样才能避免它？

var tempcanvas=document.createElement('canvas');
tempcanvas.width=2000;
tempcanvas.height=980;
var context=tempcanvas.getContext('2d');
context.imageSmoothingQuality = "High";

context.drawImage(canvas,0,0,1000,750);
var link=tempcanvas.toDataURL('image/png',1);
$scope.alert.message = link;

var blobBin = atob(link.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
    array.push(blobBin.charCodeAt(i));
}
$scope.file=new Blob([new Uint8Array(array)], {type: 'image/png'});

Answer 1

希望这对你有帮助

当您使用 html2canvas 时，所需要做的就是设置 dpi 或缩放选项，并且生成的 Canvas 应该具有您选择的 dpi/缩放比例。

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
});