Menu
Why is the produced canvas empty or cuts off half way through? Make sure that canvas element doesn't hit browser limitations for the canvas size or use the window configuration options to set a custom window size based on the canvas element: await html2canvas(element, { windowWidth: element.
Also try to clear your browser cache, this would be the problem in most cases. If that doesn't work try to remove all your css styles and add them back one by one to see when and how it is being caused. Show activity on this post.
How is it used? To render an element with html2canvas, use the following syntax: html2canvas(element[options]); The html2canvas function accepts the DOM element and returns a P``romise containing the <canvas> element.
Html2Canvas is a JavaScript library that provides the functionality to take a screenshot of the whole web page or a specific part. It technically doesn't take the screenshot but creates the view based on the available information on the page.
I hope thet help you
html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});
A solution that worked for me was to add the following to my css:
.html2canvas-container { width: 3000px !important; height: 3000px !important; }
It prevents html2canvas from limiting the rendering to the viewable area (which seems to be the default).
See here: https://github.com/niklasvh/html2canvas/issues/117
I used window.scrollTo()in my case and it worked for me.
Below is a sample code
$('#btn').on("click", function() {
window.scrollTo(0,0);
html2canvas(htmlSource).then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});
You can add in scroll position as a variable in html2canvas which removes the need to scroll the page.
html2canvas(document.querySelector("#your-element"), {
scrollX: 0,
scrollY: 0
}).then(function(canvas) {
I just did something like this and it worked for me:
html2canvas(document.querySelector("#capture2image"), {
allowTaint: true,
useCORS: true,
logging: false,
height: window.outerHeight + window.innerHeight,
windowHeight: window.outerHeight + window.innerHeight,
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With