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

Question

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

我需要调整这个 canvas 的大小（例如 2304x1440 像素到 230.4x144）并缩小到原来的 100% (2304x1440)。我该怎么做？

我把它用于 blur-effect 固定 header 的背景。然后用 $(this).scrollTop(); 滚动它方法是 here.

Answer 1

从 html2canvas 方法获取 canvas 对象后，使用其上下文以您想要的分辨率再次绘制 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;
}

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

How to resize html2canvas and scale to original 100% resolution?

javascript

css

jquery

canvas

html2canvas