У меня есть html, в котором уже есть холст, и обычные html элементы вокруг холста.
Когда я использую html2canvas во внешнем html, внутренний холст становится размытым, но не внешние элементы.
Я попытался отключить imageSmoothingEnabled
в контексте холста и увеличить scale
в параметрах html2canvas безрезультатно.
const options = {
scale : 2,
allowTaint : true,
}
const outerDiv = document.getElementById('outerDiv');
html2canvas(outerDiv, options)
.then(canvas => {
const ctx = canvas.getContext('2d');
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
window.open(canvas.toDataURL("image/png", 1.0));
})
HTML вне контекста, пример:
<div id="outerDiv">
<h1>Crisp text!</h1>
<canvas></canvas>
</div>
Примечание. В моем реальном контексте этот внутренний холст создается с использованием библиотеки canvg, которая конвертирует svg в холст, но я думаю, что он не связан, поскольку выходные данные из canvg не размыты.