javascript - Html2Canvase -> 滚动图像为空

Question

点击->我在DIV中添加一个具有绝对位置的div，该DIV具有特定的高度和宽度(垂直滚动)，用户在其中输入其数据，并在保存时使用html2canvas将html转换为图像。

  var element = angular.element("#beforeComment_" + index);
    html2canvas(element).then(function (canvas) {

    var _Image = canvas.toDataURL("image/png");
    var _img = _Image.replace(/^data:image\/(png|jpg);base64,/, "");                     
                });

如果 div 位于可见区域，则效果完美，但当我使用窗口滚动向下移动位置 DIV 时，我会得到空白图像。

但是与我使用相比

html2canvas(window.document.body).then(function (canvas) {

        var _Image = canvas.toDataURL("image/png");
        var _img = _Image.replace(/^data:image\/(png|jpg);base64,/, "");                     
                    });

即使我滚动或拖放 Div，它也能完美工作。

如果有 pluker 可以让事情变得更清晰，那就更好了，但我有复杂的 html 结构，它会增加更多的复杂性

有人可以帮忙吗:(

Answer 1

你试过吗

var element = angular.element(document.querySelector('#beforeComment_' + index)); 

此外，检查“#beforeComment_”+索引是否确实存在。