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. Здесь вы можете найти доступные варианты.Когда вы просто хотите вызвать функцию, вы используете 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
}

Затем вы можете вызывать функцию html2canvas аналогично тому, что предлагал emran, однако onrendered больше не требуется, поскольку более новые версии html2canvas работают с .then()

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

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

Обратите внимание, что на этой странице есть несколько других интересных опций, которые могут быть вам полезны.Я также могу предложить эту статью по теме, это объяснение опций и эту библиотеку , которая объединяет html2canvas и jsPDF для прямого преобразования HTML в PDF.

Answer 2

Может, это вам чем-то поможет

Все, что необходимо, это установить параметры dpi или масштаба, когда вы используете html2canvas, и у получающегося холста должны быть выбранные 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
});