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

【问题标题】：How to resize html2canvas and scale to original 100% resolution?如何调整 html2canvas 的大小并缩放到原始 100% 分辨率？
【发布时间】：2024-04-25 21:35:01
【问题描述】：

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

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

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

【问题讨论】：

嗨，尝试使用 css transform 属性，您可以在其中进行缩放，您没有提到需要将 transform: scale(1); 调整为 100% 和 'transform: scale(0.1 );' 10%
@Sethuraman 变换只会改变视图。不是决议。

标签： javascript jquery css canvas html2canvas

【解决方案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;
}

【讨论】：

非常感谢！