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

标签： javascripthtmlhtml5-canvas

Answer 1

愿这对你有所帮助

只需在使用 html2canvas 时设置 dpi 或比例选项，生成的画布应该具有您选择的 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
});