Html2canvas: Returns a blank image for any element when the document body is more than 30,000px tall.

Created on 31 May 2016  ·  16Comments  ·  Source: niklasvh/html2canvas

The library returns an empty image when the body of the document is more than 30,000px. You would try to capture an element of 100 x 100. But you get a blank image of the element is on a tall body.

Here is a fiddle which demonstrate this error.

https://jsfiddle.net/fvo1xh8b/2/

You can change the body size less than 30,000 and it works fine.

Needs More Information
Source
picture charlie-lk

Most helpful comment

@niklasvh This is a tough one but it is in fact due to the limitations of canvas size. I think this needs opened again to discuss how to implement the right behaviors. Definitely a white washed image isn't the correct behavior.

  • Default the max width/height to browser's requirements for canvas
  • Divide and conquer using multiple canvas elements and return an array.
  • Throw an error in the console advising on the canvas limitations and suggest ways to implement it.

In my case I am cloning the entire body and just set the max width/height: html2canvas(el, {height: 3000, width: 3000}).

picture toadkicker on 10 Oct 2018
👍9 ❤2 🎉2 👎1

All 16 comments

I have the exact same issue as you. Have you found any solution to this?

Sebastianvarv picture Sebastianvarv on 15 Feb 2017

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk picture charlie-lk on 15 Feb 2017

emm,i got the same problem, but finally, i figure out!
in my case, here is my solution:
put an iframe in you body element, like 

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

and every element you need to covert to canvas, you can copy and put them in this iframe, and use html2canvas, and then remove it, like this

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);
netweng picture netweng on 25 Oct 2017

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

niklasvh picture niklasvh on 12 Dec 2017

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

no-response[bot] picture no-response[bot] on 12 Dec 2017

hi when i try to screen an iframe with internal ip camera, it return a void image, please can you help me?

AntonioDilorenzo picture AntonioDilorenzo on 21 Aug 2018

@niklasvh This is a tough one but it is in fact due to the limitations of canvas size. I think this needs opened again to discuss how to implement the right behaviors. Definitely a white washed image isn't the correct behavior.

  • Default the max width/height to browser's requirements for canvas
  • Divide and conquer using multiple canvas elements and return an array.
  • Throw an error in the console advising on the canvas limitations and suggest ways to implement it.

In my case I am cloning the entire body and just set the max width/height: html2canvas(el, {height: 3000, width: 3000}).

toadkicker picture toadkicker on 10 Oct 2018
👍9 ❤2 🎉2 👎1

@toadkicker brother, u save my code/job today hahahahahahahaht thanks a lot

leandrosouza0786 picture leandrosouza0786 on 26 Sep 2019

@toadkicker Thanks !

Liberateur picture Liberateur on 24 Dec 2019

emm,i got the same problem, but finally, i figure out!
in my case, here is my solution:
put an iframe in you body element, like

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

and every element you need to covert to canvas, you can copy and put them in this iframe, and use html2canvas, and then remove it, like this

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

I tried this method, but not work exactly. In my way, will work with code below:

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

And if you want to apply your css style the same as it in current document, you also need to copy style to iframe:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});
ricosmall picture ricosmall on 16 Mar 2020

Again this is a limitation in the browser itself and this library does not handle the error correctly. No coding solution besides limiting the number of pixels captured will change it.

toadkicker picture toadkicker on 16 Mar 2020

emm,i got the same problem, but finally, i figure out!
in my case, here is my solution:
put an iframe in you body element, like

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

and every element you need to covert to canvas, you can copy and put them in this iframe, and use html2canvas, and then remove it, like this

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

I tried this method, but not work exactly. In my way, will work with code below:

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

And if you want to apply your css style the same as it in current document, you also need to copy style to iframe:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

in my case, all elements are svg or inline style, so i don't need to append stylesheet. but yes, you should add your stylesheet if needed

netweng picture netweng on 30 Mar 2020

I've faced the same issue. I needed to make an image from the modal window (with fixed position). I always received a white image. The problem was in the scroll position. This code works for me:

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})
invisor picture invisor on 24 Sep 2020
🎉5 👍3 ❤1

Worked for me like a charm! Thanks for the clever solution!

flaviostutz picture flaviostutz on 30 Sep 2020

@invisor lifesaver! That's the only thing that worked for me.

MEGApixel23 picture MEGApixel23 on 26 Oct 2020

These option might also a solution for scrolling related cases

{
  scrollX: 0,
  scrollY: -window.scrollY
}
seahindeniz picture seahindeniz on 9 Nov 2020
❤2 🎉1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

trongdau184 picture trongdau184  ·  64Comments
arindamINT picture arindamINT  ·  37Comments
shauchenka picture shauchenka  ·  56Comments
DanielSBelo picture DanielSBelo  ·  51Comments
Mallander picture Mallander  ·  23Comments