如何调整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方法获取canvas对象后，使用其上下文以所需的分辨率再次绘制画布。

比如这样，

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