如何调整html2canvas的大小并缩放到原始100％分辨率？

Question

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.querySelector(".canvas-layout").appendChild(canvas);
});

我需要调整画布的大小（例如，将2304x1440像素更改为230.4x144），然后缩放回原始的100％（2304x1440）。我该怎么办？

我将其用于固定标头背景上的模糊效果。然后使用$(this).scrollTop();滚动它。方法是here。

Answer 1

从html2canvas方法中获取画布对象后，使用其上下文以所需的分辨率再次绘制画布。

例如

function resizeCanvas(canvas, newHeight, newWidth)
{
        var context = canvas.getContext('2d');
        var imageData = context.getImageData(0, 0, canvas.width, canvas.width);
        var newCanvas = document.createElement("canvas");
        newCanvas.height = canvas.height;
        newCanvas.width = canvas.width;
        newCanvas.putImageData(imageData, 0, 0, 0, 0, newWidth, newHeight);
        return newCanvas;
}