html2canvas returns invalid image when the body height is more than 30000 pixels
The html2canvas library behaves strangely when I need to capture a control placed on an html body which is more than 30000 pixels long. My control is small (100 x 100) - but the script doesn't work when the body is long.
Here are two fiddles one is working other one is not working different body sizes
- body size 40000px (not working)
- body size 30000px (working)
$(document).ready(function()
$('#test').on('click', function()
html2canvas(document.getElementById('container'),
onrendered: function(canvas)
document.body.appendChild(canvas);
,
);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<body style="height:40000px">
<button id="test">test</button>
<div id='container'>
<img style='width:200px; height:200px;' src="www.example.com/example.jpg">
</div>
</body>
In the above example, the library returns an image - but the data is not valid. If I change the body height to something like 20000 pixels, everything works fine
javascript html screenshot html2canvas
asked May 30 '16 at 7:32
azadazad
3,27011436
add a comment |
The html2canvas library behaves strangely when I need to capture a control placed on an html body which is more than 30000 pixels long. My control is small (100 x 100) - but the script doesn't work when the body is long.
Here are two fiddles one is working other one is not working different body sizes
- body size 40000px (not working)
- body size 30000px (working)
$(document).ready(function()
$('#test').on('click', function()
html2canvas(document.getElementById('container'),
onrendered: function(canvas)
document.body.appendChild(canvas);
,
);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<body style="height:40000px">
<button id="test">test</button>
<div id='container'>
<img style='width:200px; height:200px;' src="www.example.com/example.jpg">
</div>
</body>
In the above example, the library returns an image - but the data is not valid. If I change the body height to something like 20000 pixels, everything works fine
javascript html screenshot html2canvas
asked May 30 '16 at 7:32
azadazad
3,27011436
Example not working on FF withtophigher than32741px. Chrome this number increases to32746px. IE11 seems does not have this issue. So I think it's browser specific. Try submitting issue to Html2Canvas
– Justinas
May 30 '16 at 7:56
@Justinas why its happening, can't we get image when document size larger than 32741px I have dynamically growing document.
– azad
May 30 '16 at 7:58
I don't know, I just made quick test.
– Justinas
May 30 '16 at 7:59
add a comment |
The html2canvas library behaves strangely when I need to capture a control placed on an html body which is more than 30000 pixels long. My control is small (100 x 100) - but the script doesn't work when the body is long.
Here are two fiddles one is working other one is not working different body sizes
- body size 40000px (not working)
- body size 30000px (working)
$(document).ready(function()
$('#test').on('click', function()
html2canvas(document.getElementById('container'),
onrendered: function(canvas)
document.body.appendChild(canvas);
,
);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<body style="height:40000px">
<button id="test">test</button>
<div id='container'>
<img style='width:200px; height:200px;' src="www.example.com/example.jpg">
</div>
</body>
In the above example, the library returns an image - but the data is not valid. If I change the body height to something like 20000 pixels, everything works fine
javascript html screenshot html2canvas
asked May 30 '16 at 7:32
azadazad
3,27011436
The html2canvas library behaves strangely when I need to capture a control placed on an html body which is more than 30000 pixels long. My control is small (100 x 100) - but the script doesn't work when the body is long.
Here are two fiddles one is working other one is not working different body sizes
- body size 40000px (not working)
- body size 30000px (working)
$(document).ready(function()
$('#test').on('click', function()
html2canvas(document.getElementById('container'),
onrendered: function(canvas)
document.body.appendChild(canvas);
,
);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<body style="height:40000px">
<button id="test">test</button>
<div id='container'>
<img style='width:200px; height:200px;' src="www.example.com/example.jpg">
</div>
</body>
In the above example, the library returns an image - but the data is not valid. If I change the body height to something like 20000 pixels, everything works fine
$(document).ready(function()
$('#test').on('click', function()
html2canvas(document.getElementById('container'),
onrendered: function(canvas)
document.body.appendChild(canvas);
,
);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<body style="height:40000px">
<button id="test">test</button>
<div id='container'>
<img style='width:200px; height:200px;' src="www.example.com/example.jpg">
</div>
</body>
$(document).ready(function()
$('#test').on('click', function()
html2canvas(document.getElementById('container'),
onrendered: function(canvas)
document.body.appendChild(canvas);
,
);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<body style="height:40000px">
<button id="test">test</button>
<div id='container'>
<img style='width:200px; height:200px;' src="www.example.com/example.jpg">
</div>
</body>
javascript html screenshot html2canvas
javascript html screenshot html2canvas
asked May 30 '16 at 7:32
azadazad
3,27011436
asked May 30 '16 at 7:32
azadazad
3,27011436
edited May 31 '16 at 5:07
azad
asked May 30 '16 at 7:32
azadazad
3,27011436
asked May 30 '16 at 7:32
azadazad
3,27011436
asked May 30 '16 at 7:32
azadazad
3,27011436
3,27011436
Example not working on FF withtophigher than32741px. Chrome this number increases to32746px. IE11 seems does not have this issue. So I think it's browser specific. Try submitting issue to Html2Canvas
– Justinas
May 30 '16 at 7:56
@Justinas why its happening, can't we get image when document size larger than 32741px I have dynamically growing document.
– azad
May 30 '16 at 7:58
I don't know, I just made quick test.
– Justinas
May 30 '16 at 7:59
add a comment |
Example not working on FF withtophigher than32741px. Chrome this number increases to32746px. IE11 seems does not have this issue. So I think it's browser specific. Try submitting issue to Html2Canvas
– Justinas
May 30 '16 at 7:56
@Justinas why its happening, can't we get image when document size larger than 32741px I have dynamically growing document.
– azad
May 30 '16 at 7:58
I don't know, I just made quick test.
– Justinas
May 30 '16 at 7:59
Example not working on FF with
top higher than 32741px. Chrome this number increases to 32746px. IE11 seems does not have this issue. So I think it's browser specific. Try submitting issue to Html2Canvas– Justinas
May 30 '16 at 7:56
Example not working on FF with
top higher than 32741px. Chrome this number increases to 32746px. IE11 seems does not have this issue. So I think it's browser specific. Try submitting issue to Html2Canvas– Justinas
May 30 '16 at 7:56
@Justinas why its happening, can't we get image when document size larger than 32741px I have dynamically growing document.
– azad
May 30 '16 at 7:58
@Justinas why its happening, can't we get image when document size larger than 32741px I have dynamically growing document.
– azad
May 30 '16 at 7:58
I don't know, I just made quick test.
– Justinas
May 30 '16 at 7:59
I don't know, I just made quick test.
– Justinas
May 30 '16 at 7:59
add a comment |
3 Answers
3
active
oldest
votes
finally I found why this happens based on this stackoverflow answer
the html2canvas library creates a canvas its width height is the width and height of document body. If document width or height exceeds the maximum width and height allowed by the browser then its failed to create the canvas for that document body that why I am getting a invalid image.
To solve this problem I cloned the Element which to be transfer to image and set to the top of the document ('position: absolute; top: 0') and get the image from it. after get the image I removed that cloned element. remember to do this we need to set width and height property of "html2canvas" library options.
I my case my element max height is 1000px and I set 3000, 3000 therefore it can be cover entire element which positioned top.
note: Do not set invisible or hide the cloned element.
html2canvas($parentNode,
width: 3000,
height:3000,
onrendered: function(canvas)
console.log(canvas.toDataURL());
$parentNode.remove(); //removing cloned element
);
edited May 23 '17 at 12:03
Community♦
11
answered Jun 8 '16 at 5:05
azadazad
3,27011436
add a comment |
$('#test').click(function ()
// Create clone of element.
var clone = $('#element').clone();
// Append clone to body.
$('body').append(clone);
html2canvas($('#element'),
onrendered: function (canvas)
console.log(canvas.toDataURL("image/png"));
// Remove clone element.
clone.remove();
);
);
answered Jul 26 '18 at 12:40
Nitin Singh NarukaNitin Singh Naruka
11
add a comment |
Works for me adding style overflow-y:hidden to body tag before html2canvas and restore it to overflow-y:scroll after .
$("#doss").click(function()
$('body').css('overflow-y','hidden');
html2canvas(document.querySelector("body")).then(canvas =>
document.body.appendChild(canvas)
);
$('body').css('overflow-y','scroll');
);`
edited Nov 12 '18 at 4:57
Foo
1
answered Nov 12 '18 at 4:41
Mario AbbruscatoMario Abbruscato
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37520013%2fhtml2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
finally I found why this happens based on this stackoverflow answer
the html2canvas library creates a canvas its width height is the width and height of document body. If document width or height exceeds the maximum width and height allowed by the browser then its failed to create the canvas for that document body that why I am getting a invalid image.
To solve this problem I cloned the Element which to be transfer to image and set to the top of the document ('position: absolute; top: 0') and get the image from it. after get the image I removed that cloned element. remember to do this we need to set width and height property of "html2canvas" library options.
I my case my element max height is 1000px and I set 3000, 3000 therefore it can be cover entire element which positioned top.
note: Do not set invisible or hide the cloned element.
html2canvas($parentNode,
width: 3000,
height:3000,
onrendered: function(canvas)
console.log(canvas.toDataURL());
$parentNode.remove(); //removing cloned element
);
edited May 23 '17 at 12:03
Community♦
11
answered Jun 8 '16 at 5:05
azadazad
3,27011436
add a comment |
finally I found why this happens based on this stackoverflow answer
the html2canvas library creates a canvas its width height is the width and height of document body. If document width or height exceeds the maximum width and height allowed by the browser then its failed to create the canvas for that document body that why I am getting a invalid image.
To solve this problem I cloned the Element which to be transfer to image and set to the top of the document ('position: absolute; top: 0') and get the image from it. after get the image I removed that cloned element. remember to do this we need to set width and height property of "html2canvas" library options.
I my case my element max height is 1000px and I set 3000, 3000 therefore it can be cover entire element which positioned top.
note: Do not set invisible or hide the cloned element.
html2canvas($parentNode,
width: 3000,
height:3000,
onrendered: function(canvas)
console.log(canvas.toDataURL());
$parentNode.remove(); //removing cloned element
);
edited May 23 '17 at 12:03
Community♦
11
answered Jun 8 '16 at 5:05
azadazad
3,27011436
add a comment |
finally I found why this happens based on this stackoverflow answer
the html2canvas library creates a canvas its width height is the width and height of document body. If document width or height exceeds the maximum width and height allowed by the browser then its failed to create the canvas for that document body that why I am getting a invalid image.
To solve this problem I cloned the Element which to be transfer to image and set to the top of the document ('position: absolute; top: 0') and get the image from it. after get the image I removed that cloned element. remember to do this we need to set width and height property of "html2canvas" library options.
I my case my element max height is 1000px and I set 3000, 3000 therefore it can be cover entire element which positioned top.
note: Do not set invisible or hide the cloned element.
html2canvas($parentNode,
width: 3000,
height:3000,
onrendered: function(canvas)
console.log(canvas.toDataURL());
$parentNode.remove(); //removing cloned element
);
edited May 23 '17 at 12:03
Community♦
11
answered Jun 8 '16 at 5:05
azadazad
3,27011436
finally I found why this happens based on this stackoverflow answer
the html2canvas library creates a canvas its width height is the width and height of document body. If document width or height exceeds the maximum width and height allowed by the browser then its failed to create the canvas for that document body that why I am getting a invalid image.
To solve this problem I cloned the Element which to be transfer to image and set to the top of the document ('position: absolute; top: 0') and get the image from it. after get the image I removed that cloned element. remember to do this we need to set width and height property of "html2canvas" library options.
I my case my element max height is 1000px and I set 3000, 3000 therefore it can be cover entire element which positioned top.
note: Do not set invisible or hide the cloned element.
html2canvas($parentNode,
width: 3000,
height:3000,
onrendered: function(canvas)
console.log(canvas.toDataURL());
$parentNode.remove(); //removing cloned element
);
edited May 23 '17 at 12:03
Community♦
11
answered Jun 8 '16 at 5:05
azadazad
3,27011436
edited May 23 '17 at 12:03
Community♦
11
edited May 23 '17 at 12:03
Community♦
11
edited May 23 '17 at 12:03
Community♦
11
11
answered Jun 8 '16 at 5:05
azadazad
3,27011436
answered Jun 8 '16 at 5:05
azadazad
3,27011436
answered Jun 8 '16 at 5:05
azadazad
3,27011436
3,27011436
add a comment |
add a comment |
$('#test').click(function ()
// Create clone of element.
var clone = $('#element').clone();
// Append clone to body.
$('body').append(clone);
html2canvas($('#element'),
onrendered: function (canvas)
console.log(canvas.toDataURL("image/png"));
// Remove clone element.
clone.remove();
);
);
answered Jul 26 '18 at 12:40
Nitin Singh NarukaNitin Singh Naruka
11
add a comment |
$('#test').click(function ()
// Create clone of element.
var clone = $('#element').clone();
// Append clone to body.
$('body').append(clone);
html2canvas($('#element'),
onrendered: function (canvas)
console.log(canvas.toDataURL("image/png"));
// Remove clone element.
clone.remove();
);
);
answered Jul 26 '18 at 12:40
Nitin Singh NarukaNitin Singh Naruka
11
add a comment |
$('#test').click(function ()
// Create clone of element.
var clone = $('#element').clone();
// Append clone to body.
$('body').append(clone);
html2canvas($('#element'),
onrendered: function (canvas)
console.log(canvas.toDataURL("image/png"));
// Remove clone element.
clone.remove();
);
);
answered Jul 26 '18 at 12:40
Nitin Singh NarukaNitin Singh Naruka
11
$('#test').click(function ()
// Create clone of element.
var clone = $('#element').clone();
// Append clone to body.
$('body').append(clone);
html2canvas($('#element'),
onrendered: function (canvas)
console.log(canvas.toDataURL("image/png"));
// Remove clone element.
clone.remove();
);
);
answered Jul 26 '18 at 12:40
Nitin Singh NarukaNitin Singh Naruka
11
answered Jul 26 '18 at 12:40
Nitin Singh NarukaNitin Singh Naruka
11
answered Jul 26 '18 at 12:40
Nitin Singh NarukaNitin Singh Naruka
11
answered Jul 26 '18 at 12:40
Nitin Singh NarukaNitin Singh Naruka
11
11
add a comment |
add a comment |
Works for me adding style overflow-y:hidden to body tag before html2canvas and restore it to overflow-y:scroll after .
$("#doss").click(function()
$('body').css('overflow-y','hidden');
html2canvas(document.querySelector("body")).then(canvas =>
document.body.appendChild(canvas)
);
$('body').css('overflow-y','scroll');
);`
edited Nov 12 '18 at 4:57
Foo
1
answered Nov 12 '18 at 4:41
Mario AbbruscatoMario Abbruscato
1
add a comment |
Works for me adding style overflow-y:hidden to body tag before html2canvas and restore it to overflow-y:scroll after .
$("#doss").click(function()
$('body').css('overflow-y','hidden');
html2canvas(document.querySelector("body")).then(canvas =>
document.body.appendChild(canvas)
);
$('body').css('overflow-y','scroll');
);`
edited Nov 12 '18 at 4:57
Foo
1
answered Nov 12 '18 at 4:41
Mario AbbruscatoMario Abbruscato
1
add a comment |
Works for me adding style overflow-y:hidden to body tag before html2canvas and restore it to overflow-y:scroll after .
$("#doss").click(function()
$('body').css('overflow-y','hidden');
html2canvas(document.querySelector("body")).then(canvas =>
document.body.appendChild(canvas)
);
$('body').css('overflow-y','scroll');
);`
edited Nov 12 '18 at 4:57
Foo
1
answered Nov 12 '18 at 4:41
Mario AbbruscatoMario Abbruscato
1
Works for me adding style overflow-y:hidden to body tag before html2canvas and restore it to overflow-y:scroll after .
$("#doss").click(function()
$('body').css('overflow-y','hidden');
html2canvas(document.querySelector("body")).then(canvas =>
document.body.appendChild(canvas)
);
$('body').css('overflow-y','scroll');
);`
edited Nov 12 '18 at 4:57
Foo
1
answered Nov 12 '18 at 4:41
Mario AbbruscatoMario Abbruscato
1
edited Nov 12 '18 at 4:57
Foo
1
edited Nov 12 '18 at 4:57
Foo
1
edited Nov 12 '18 at 4:57
Foo
1
1
answered Nov 12 '18 at 4:41
Mario AbbruscatoMario Abbruscato
1
answered Nov 12 '18 at 4:41
Mario AbbruscatoMario Abbruscato
1
answered Nov 12 '18 at 4:41
Mario AbbruscatoMario Abbruscato
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37520013%2fhtml2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Example not working on FF with
tophigher than32741px. Chrome this number increases to32746px. IE11 seems does not have this issue. So I think it's browser specific. Try submitting issue to Html2Canvas– Justinas
May 30 '16 at 7:56
@Justinas why its happening, can't we get image when document size larger than 32741px I have dynamically growing document.
– azad
May 30 '16 at 7:58
I don't know, I just made quick test.
– Justinas
May 30 '16 at 7:59