在div的位置为绝对位置时获取屏幕截图

Question

当div的位置为绝对值时如何获得屏幕截图？我收到错误消息：“未捕获的IndexSizeError：索引或大小为负数，或大于允许值”我想添加png图像，一个由另一个决定，所以我使用了z-index我的html：

<div id="divFrame">
        <img id="frame">
        <div id="zoom" class="zoomProps" ><img id="polaroid"/> </div>
 </div>

CSS：

.zoomProps {
top: 0;
left: 0;
width: 100%;
z-index: 2;
position: absolute;
 }
 #frame {
left: 0;
top: 0;
width: 100%;
z-index: 3;
pointer-events: none;
position: absolute;
   }

JQuery：

 html2canvas(document.getElementById('divFrame'), {
onrendered: function(canvas) {
    var img = canvas.toDataURL();
    $("#yemekPageImgFullScreen").attr('src', img);
    $("#popupBasic").popup();
    $("#popupBasic").popup('open');
}
   });

Answer 1

重复：已问/答here。

quoted anwer：

[This是html2canvas错误报告。

我能够通过修补html2canvas.js文件来修复Uncaught Error：IndexSizeError：DOM Exception 1。

替换为：

ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);

通过此：

var imgData = canvas.getContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height);
ctx.putImageData(imgData, 0, 0);

Answer 2

找到解决方案很长时间之后。我理解为什么Div使用样式绝对位置时库html2canvas无法正确捕获屏幕。

当您将div用于样式位置：绝对。 div的图像背景保留在其原始位置（例如top：100，left：300）。但是html2canvas会将您封装的元素克隆到iframe中，该位置的起始位置为top：0，left：0。然后html2canvas在iframe的top：0，left：0处开始捕获图像像素。

这是我的解决方案的简单逻辑，用于移动绝对div而不让用户知道它已移动。我将绝对div克隆到新div，该新div将不透明度设置为0.0，并将id设置为“ content-capture”。然后将其样式设置为left：0并调用html2canvas函数。

$('body').append("<div id='capture-area' style='opacity: 0.0;'></div>");
$('.wall-snap').clone().attr('id','content-capture').appendTo('#capture-area');
$('#content-capture').css('left', 0);

html2canvas($('#content-capture')[0], {
    letterRendering: 1,
    allowTaint: true,
    useCORS: true,
}).then(canvas => {
    var a = document.createElement('a');
    a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
    a.download = 'somefilename.jpg';
    a.click();
    $('#content-capture').remove();
});