当 div 的位置是绝对的时获取屏幕截图答案

【问题标题】：Getting screenshot when position of div is absolute当 div 的位置是绝对的时获取屏幕截图
【发布时间】：2019-12-27 18:10:28
【问题描述】：

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

【问题讨论】：

html2canvas error: Uncaught Error: IndexSizeError: DOM Exception 1的可能重复

标签： jquery html2canvas

【解决方案1】：

重复：已询问/回答 here。

引用答案：

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

【讨论】：

如果问题是骗子，您应该投票将其作为骗子关闭

【解决方案2】：

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

当您使用带有样式位置的 div 时：绝对。 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();
});

【讨论】：