Question

我有一个没有设置截图的宽度或高度的元素。它被推送到本地存储中，用作下一页的背景图像。问题在于，如果文档被放大，图像也将被放大，或者如果元素的一部分被切除，则其仅显示图像中的可见部分。我认为解决方案是根据文档大小设置宽度和高度，但是我不确定如何实现这一点，因为该文档或线程并不多。

捕获功能如下所示：

function oncap() {

var crt = "none";
var canv = document.getElementById("allcontainer");
html2canvas(canv).then(function(canvas) {
    window.localStorage.clear;
    localStorage.setItem(canvasName, canvas.toDataURL("image/jpeg"));
    window.location.href = 'FLOWCANVASTEST.html';

}); 
}

编辑：解决方案最终位于显示侧，而不是捕获本身。当我从本地存储中提取图像时，我将其设置为背景图像。设置背景尺寸以包含缩放功能可以解决其他获得此类问题的人的问题。

Answer 1

因此，您可以做的是在绘制画布之前，可以先读取屏幕的大小，然后在绘制图像时将其传递给画布，以便画布的初始化看起来像这样：

initCanvas: function () {
            canvas = document.getElementById('canvas-man');
            c = canvas.getContext('2d');
            canvas.width = document.getClientWidth;
            canvas.height = document.getClientHeight;
            return canvas;
        },

然后您还可以将高度和宽度也传递给放置图像功能

putImage: function (x,y) {
            var img = document.createElement('img');
            img.onload = function () {
                c.drawImage(img, 0, 0, x, y);
            }
            img.src = 'images/products.jpg';
            img.id = 'canvasImage';
    }

Html2canvas仅使部分元素在视口中可见

1 个答案: