javascript - html2canvas 模糊内部画布

Question

我有一个 html，里面已经有一个画布，并且画布周围有常规的 html 元素。

当我在外部 html 中使用 html2canvas 时，内部画布会变得模糊，但外部元素不会。

我尝试禁用imageSmoothingEnabled画布上下文并增加scalehtml2canvas 选项无济于事。

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 的输出并不模糊。

标签： javascriptcanvashtml2canvascanvg