Dom-to-image: Div scroll issue

Created on 1 Feb 2018 · 8Comments · Source: tsayen/dom-to-image

Use case:

If we have much data in a div and i am trying to get small complete image of that content, that time it is giving me scroll in image and only visible part of that div is reflecting in image

[jsfiddle]([https://jsfiddle.net/singhalpiyush1993/2m8dcr63/26/])
https://jsfiddle.net/singhalpiyush1993/2m8dcr63/26/

Expected behavior

i should get complete content in image

Actual behavior (stack traces, console logs etc)

getting only visible part of that saction

Source

piyushSinghalDemo

👍3

Most helpful comment

In the last version of the library, it is no need to add
width: auto; height: auto

Passing the scroll height and width options should be enough:
domtoimage.toPng(node, { width: node.scrollWidth, height: node.scrollHeight })

See a working example here: https://jsfiddle.net/najorcruzcruz/kL9us4x1/6/

najor on 1 Mar 2019

❤2 👍2

All 8 comments

+1 i Have this problem, and waiting a correct ansver for this.

Mahmuduman on 1 Feb 2018

Hi Guys,
Is there any idea i can try to resolve this issue?

piyushSinghalDemo on 5 Feb 2018

You fix This Problem with div inside div method,

Up level div overflow scroll and have width and heighth, inside div width and height auto

when you try render, select inside div, then it get real width and heigth of element without scroll capture..

sample.

......
         <img>...........
   </div>
</div>

<p>style.css</p>

<h1>upsideDiv{</h1>

<p><a rel="nofollow noopener" target="_blank" href="width:300px;">width:300px;</a><br />
<a rel="nofollow noopener" target="_blank" href="heighth:300px;">heighth:300px;</a><br />
<a rel="nofollow noopener" target="_blank" href="overflow:scroll;">overflow:scroll;</a><br />
}</p>

<h1>insideDiv{</h1>

<p><a rel="nofollow noopener" target="_blank" href="width:auto;">width:auto;</a><br />
<a rel="nofollow noopener" target="_blank" href="heighth:auto;">heighth:auto;</a><br />
}</p>

<p>js Code-------------------------------------------------------------------------<br />
var node = document.getElementById('insideDiv');<br />
        domtoimage.toPng(node)<br />
            .then(function (dataUrl) {<br />
                document.getElementById("showImage").src =dataUrl;<br />
            })<br />
            .catch(function (error) {<br />
                console.error('errorr");<br />
            });</p>

<p><strong>@piyushSinghalDemo</strong> </p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/36035570?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Mahmuduman picture">
                                <strong>Mahmuduman</strong>
                                <span class="text-muted ml-1">on 22 Feb 2018</span>
                            </div>
                            <div class="col text-right">
                                                                👍<span class="ml-2 mr-3">3</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>Finally;<br />
<a rel="nofollow noopener" target="_blank" href="https://jsfiddle.net/2m8dcr63/32/">https://jsfiddle.net/2m8dcr63/32/</a></p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/36035570?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Mahmuduman picture">
                                <strong>Mahmuduman</strong>
                                <span class="text-muted ml-1">on 22 Feb 2018</span>
                            </div>
                            <div class="col text-right">
                                                                👍<span class="ml-2 mr-3">1</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>In the last version of the library, it is no need to add<br />
<code>width: auto; height: auto</code></p>

<p>Passing the scroll height and width options should be enough:<br />
<code>domtoimage.toPng(node, { width: node.scrollWidth, height: node.scrollHeight })</code></p>

<p>See a working example here: <a rel="nofollow noopener" target="_blank" href="https://jsfiddle.net/najorcruzcruz/kL9us4x1/6/">https://jsfiddle.net/najorcruzcruz/kL9us4x1/6/</a></p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/5479033?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="najor picture">
                                <strong>najor</strong>
                                <span class="text-muted ml-1">on 1 Mar 2019</span>
                            </div>
                            <div class="col text-right">
                                                                ❤<span class="ml-2 mr-3">2</span>
👍<span class="ml-2 mr-3">2</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>what if we have a scrollable-div inside a parent-div and we are converting dom for parent-div then how will we get the visible tags in scrollable-div ? </p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/36472275?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Sugam-intelligaia picture">
                                <strong>Sugam-intelligaia</strong>
                                <span class="text-muted ml-1">on 17 Apr 2019</span>
                            </div>
                            <div class="col text-right">
                                                                👍<span class="ml-2 mr-3">1</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <blockquote>
  <p>what if we have a scrollable-div inside a parent-div and we are converting dom for parent-div then how will we get the visible tags in scrollable-div?</p>
</blockquote>

<p>You need to get <code>scrollable-div</code> to convert image not the parent div.</p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/31165550?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="sryara picture">
                                <strong>sryara</strong>
                                <span class="text-muted ml-1">on 18 Jun 2019</span>
                            </div>
                            <div class="col text-right">
                                                                                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <blockquote>
  <p>In the last version of the library, it is no need to add<br />
  <code>width: auto; height: auto</code></p>
  
  <p>Passing the scroll height and width options should be enough:<br />
  <code>domtoimage.toPng(node, { width: node.scrollWidth, height: node.scrollHeight })</code></p>
  
  <p>See a working example here: <a rel="nofollow noopener" target="_blank" href="https://jsfiddle.net/najorcruzcruz/kL9us4x1/6/">https://jsfiddle.net/najorcruzcruz/kL9us4x1/6/</a></p>
</blockquote>

<p>this solves the problem! GREAT!</p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/12155015?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="palminha picture">
                                <strong>palminha</strong>
                                <span class="text-muted ml-1">on 24 Apr 2020</span>
                            </div>
                            <div class="col text-right">
                                                                                            </div>
                        </div>
                    </div>
                </div>

</div>

<div class="col-12">
                <div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown text-center helpful">
                        <div class="title">Was this page helpful?</div>
                                                                                                    <div class="mt-1" onMouseLeave="rating(293507396, 0);">
                                                                                                                        <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(293507396, 1);" onclick="rate(293507396, 1);"></i>
                                                                <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(293507396, 2);" onclick="rate(293507396, 2);"></i>
                                                                <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(293507396, 3);" onclick="rate(293507396, 3);"></i>
                                                                <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(293507396, 4);" onclick="rate(293507396, 4);"></i>
                                                                <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(293507396, 5);" onclick="rate(293507396, 5);"></i>
                                                                                    </div>
                        <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div>
                    </div>
                </div>
                <div class="mb-4">                   
                    <ins class="adsbygoogle"
                        style="display:block"
                        data-ad-client="ca-pub-3835332123789605"
                        data-ad-slot="3452512275"
                        data-ad-format="auto"
                        
                        data-full-width-responsive="true"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">

<div class="card card-custom issue-box">
            <div class="card-body pt-3 pb-5">
                <h2 class="mb-4">Related issues</h2>
                                                <div>
                    <strong>
                        <a href="/dom-to-image/153210765/printing-node-not-currently-attached-to-dom">Printing node not currently attached to DOM</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/142207?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rhmg picture">
                    <strong class="pr-1" dir="ltr">rhmg</strong>
                                         · 
                    <span class="px-1" dir="ltr">9</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/dom-to-image/280178672/not-working-with-internet-explorer">Not working with Internet Explorer</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/11941140?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="AbuSufyan picture">
                    <strong class="pr-1" dir="ltr">AbuSufyan</strong>
                                         · 
                    <span class="px-1" dir="ltr">7</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/dom-to-image/302646433/topng-and-tojpeg-give-empty-response">Topng() and toJPEG() give empty response</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/21118701?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="shahebaz444 picture">
                    <strong class="pr-1" dir="ltr">shahebaz444</strong>
                                         · 
                    <span class="px-1" dir="ltr">5</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/dom-to-image/210817286/cant-print-position-absolute">Cant print position: absolute</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/15359478?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="PhpSriptKiddie picture">
                    <strong class="pr-1" dir="ltr">PhpSriptKiddie</strong>
                                         · 
                    <span class="px-1" dir="ltr">4</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/dom-to-image/331695321/font-variation-after-chrome-update">Font variation after Chrome update</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/40176319?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zaghop picture">
                    <strong class="pr-1" dir="ltr">zaghop</strong>
                                         · 
                    <span class="px-1" dir="ltr">9</span><span>Comments</span>
                                    </div>
                                
            </div>
        </div>
        
        <div class="sticky-top pt-4">
            <ins class="adsbygoogle"
                style="display:block"
                data-ad-client="ca-pub-3835332123789605"
                data-ad-slot="3919948963"
                data-ad-format="auto"
                
                data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>

<div id="ph-below-related-2" class="mt-4">
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-client="ca-pub-3835332123789605"
                    data-ad-slot="3919948963"
                    data-ad-format="auto"
                    
                    data-full-width-responsive="true"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        
    </div>

</div>
		<div class="skyscraper-container">
			<ins class="adsbygoogle"
				style="display:block"
				data-ad-client="ca-pub-3835332123789605"
				data-ad-slot="7879185320"
				data-ad-format="vertical"
				data-full-width-responsive="true"></ins>
			<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
	</div>

<div class="mt-5 spacer"></div>
<footer class="mt-5 pb-2 py-4 text-center mt-auto">
    <div class="container">
        <a class="navbar-brand logo mr-5" href="/">
            <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo">
            bleeping<strong>coder</strong>
        </a>

<div class="mt-4">
            bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners.        </div>
                <div>
            Source for this page: <a href="https://www.github.com/tsayen/dom-to-image/issues/183" rel="nofollow noreferrer" target="_blank">Source</a>
        </div>
            </div>

<div class="container">
        <div class="row">
            <div class="col-sm-4 col-lg mb-sm-0 mb-5">
                <strong>Popular programming languages</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/python" dir="ltr">Python</a>
                    </li>
                    <li class="mb-2">
                        <a href="/javascript" dir="ltr">JavaScript</a>
                    </li>
                    <li class="mb-2">
                        <a href="/typescript" dir="ltr">TypeScript</a>
                    </li>
                    <li class="mb-2">
                        <a href="/cpp" dir="ltr">C++</a>
                    </li>
                    <li class="mb-2">
                        <a href="/csharp" dir="ltr">C#</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4 col-lg mb-sm-0 mb-5">
                <strong>Popular GitHub projects</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/microsoft/vscode" dir="ltr">vscode</a>
                    </li>
                    <li class="mb-2">
                        <a href="/numpy/numpy" dir="ltr">numpy</a>
                    </li>
                    <li class="mb-2">
                        <a href="/ant-design/ant-design" dir="ltr">ant-design</a>
                    </li>
                    <li class="mb-2">
                        <a href="/mui-org/material-ui" dir="ltr">material-ui</a>
                    </li>
                    <li class="mb-2">
                        <a href="/vercel/next-js" dir="ltr">next.js</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4 col-lg mb-0">
                <strong>More GitHub projects</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/rust-lang/rust" dir="ltr">rust</a>
                    </li>
                    <li class="mb-2">
                        <a href="/moment/moment" dir="ltr">moment</a>
                    </li>
                    <li class="mb-2">
                        <a href="/yarnpkg/yarn" dir="ltr">yarn</a>
                    </li>
                    <li class="mb-2">
                        <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a>
                    </li>
                    <li class="mb-2">
                        <a href="/JuliaLang/julia" dir="ltr">julia</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<hr class="mb-5 mt-5">
    <div class="container text-muted">
        © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br />
        By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>.
    </div>
</footer>

</html>