0

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

查询：

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

2 回答 2

1

重复：已在此处询问/回答。

引用答案：

这是html2canvas错误报告。

通过修补 html2canvas.js 文件，我能够修复未捕获的错误：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);
于 2014-01-10T15:14:59.433 回答
1

找了很久才解决。我理解为什么当 Div 使用绝对样式位置时库 html2canvas 无法正确捕获屏幕。

当您使用带有样式位置的 div 时：absolute。div 的图像背景保持在其原始位置（例如顶部：100，左侧：300）。但是 html2canvas 将您的元素克隆到 iframe 中，该位置从顶部：0，左侧：0 开始。然后 html2canvas 开始在 iframe 的 top:0, left:0 处捕获图像像素。

这些是我在不让用户知道它移动的情况下移动绝对 div 的解决方案的简单逻辑。我将绝对 div 克隆到新 div，将不透明度设置为 0.0，并将 id 设置为“内容捕获”。然后将其样式设置为 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();
});
于 2019-12-27T10:10:28.147 回答