Getting screenshot when position of div is absolute

Question

How can get screenshoot when position of div is absolute?
I'm getting error: "Uncaught IndexSizeError: Index or size was negative, or greater than the allowed value" I want to add png images, one is up to the other, so I used z-index
My 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');
}
   });

Possible duplicate of [html2canvas error: Uncaught Error: IndexSizeError: DOM Exception 1](https://stackoverflow.com/questions/15328764/html2canvas-error-uncaught-error-indexsizeerror-dom-exception-1) — Zach Saucier, Jun 21 '18 at 19:32

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

Duplicate: already asked/answered here.

quoted anwer:

This is the html2canvas bug report.

I was able to fix the Uncaught Error: IndexSizeError: DOM Exception 1 by patching the html2canvas.js file.

replace this:

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

by this:

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

edited May 23 '17 at 11:58

Community

1
1

answered Jan 10 '14 at 15:14

R. Oosterholt

7,720
2
53
77

If the question is a dupe you should vote to close it as a dupe – Zach Saucier Jun 21 '18 at 19:32

score 1 · Answer 2 · answered Dec 27 '19 at 10:10

After find solution for a long time. I understand why library html2canvas can't capture screen correctly when Div use style position absolute.

When you use div with style position:absolute. The image background of div remains at its original place (ex top:100, left:300). But html2canvas clone your element encapsulated to iframe that position start at top:0, left:0. Then html2canvas start capture image pixel at top:0 , left:0 of the iframe.

These is the simple logic of my solution for move absolute div without letting the user know it moved. I cloned absolute div to new div that set opacity to 0.0 with set id to "content-capture". Then set style of it to left:0 and call html2canvas function.

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

No any .wall-snap class in example – Vitalicus Nov 20 '22 at 20:43 — Vitalicus, Nov 20 '22 at 20:43

Getting screenshot when position of div is absolute

2 Answers2