Как изменить размер html2canvas и масштабировать до исходного разрешения 100%?

Question

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

Мне нужно изменить размер этого холста (например, с 2304x1440 пикселей до 230.4x144) и вернуться к исходному 100% (2304x1440). Как я могу это сделать?

Я использую его для размытия на фоне фиксированного заголовка. Затем прокрутите его с помощью $(this).scrollTop(); Этот метод здесь .

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