Div scroll issue

[piyushSinghalDemo]

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

[Mahmuduman]

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

[piyushSinghalDemo]

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

[Mahmuduman]

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>width:300px; heighth:300px; overflow:scroll; }</p> <h1>insideDiv{</h1> <p>width:auto; heighth:auto; }</p> <p>js Code------------------------------------------------------------------------- var node = document.getElementById('insideDiv');<br /> domtoimage.toPng(node) .then(function (dataUrl) { document.getElementById("showImage").src =dataUrl; }) .catch(function (error) { console.error('errorr"); });</p> <p>@piyushSinghalDemo </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Mahmuduman"><img src="https://avatars.githubusercontent.com/u/36035570?v=4" />Mahmuduman</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Finally; <a href="https://jsfiddle.net/2m8dcr63/32/">https://jsfiddle.net/2m8dcr63/32/</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/najor"><img src="https://avatars.githubusercontent.com/u/5479033?v=4" />najor</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>In the last version of the library, it is no need to add <code>width: auto; height: auto</code></p> <p>Passing the scroll height and width options should be enough: <code>domtoimage.toPng(node, { width: node.scrollWidth, height: node.scrollHeight })</code></p> <p>See a working example here: <a href="https://jsfiddle.net/najorcruzcruz/kL9us4x1/6/">https://jsfiddle.net/najorcruzcruz/kL9us4x1/6/</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Sugam-intelligaia"><img src="https://avatars.githubusercontent.com/u/36472275?v=4" />Sugam-intelligaia</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <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> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sryara"><img src="https://avatars.githubusercontent.com/u/31165550?v=4" />sryara</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <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> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/palminha"><img src="https://avatars.githubusercontent.com/u/12155015?v=4" />palminha</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>In the last version of the library, it is no need to add <code>width: auto; height: auto</code></p> <p>Passing the scroll height and width options should be enough: <code>domtoimage.toPng(node, { width: node.scrollWidth, height: node.scrollHeight })</code></p> <p>See a working example here: <a 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> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Sukarnascience"><img src="https://avatars.githubusercontent.com/u/47217084?v=4" />Sukarnascience</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I have also same issue but i am fail to solve this please help me tooo...</p> <h2>My React JS Part</h2> <pre><code class="language-js"> import domtoimage from 'dom-to-image'; import download from 'downloadjs'; // ... const downloadSS = () =>{</code></pre> </blockquote> <pre><code> var today = new Date(); var date = today.getFullYear()+''+(today.getMonth()+1)+''+today.getDate(); var time = today.getHours()+''+today.getMinutes()+''+today.getSeconds(); var dateTime = date+'_'+time; let ssPart = document.getElementsByClassName('ToDo') domtoimage.toPng(ssPart[0]) .then(function (image) { download(image, `Web-TodoOf-${dateTime}.png`); }); }</code></pre> <p>//...</p> <div className="ToDo"> <h2><FaClipboardCheck/> I have Todo:</h2> <ul> {todos.map((todo,index)=>( <li id={todo.id}> { todo.complete ? <div className="TodoListPartComplete"> <p>{todo.data}</p> <p className="deleteAlign"> <button className="deleteAlignbtn" onClick={()=>deleteTodo(index)}> <MdDeleteForever size={20}/> </button> </p> <p> <button className="TaskCompletebtn" onClick={()=>taskComplete(index,todo.complete,todo.data)}> <GoChecklist size={20}/> </button> </p> </div> ``` ## My Css Part ```css .ToDo{ top:90px; right: 5px; left: 5px; bottom: 94px; position:fixed; overflow-y: scroll; border-radius: 10px; border: 2px solid rgb(165, 107, 32); background-color: rgb(255, 255, 255); } ``` </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lokeshsasapu"><img src="https://avatars.githubusercontent.com/u/73963976?v=4" />lokeshsasapu</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>I am also facing similar issue. When I try to capture the list of options and after scrolling to the bottom, the screenshot unable to detect the scrolled part. Instead it has been capturing from the top of the list. Please find the attached image, in which the scrrenshot gets appended to the same page after capturing. In my case I should capture the entire screen. And it is not enough if I consider select options div alone for screen capture. Can someone help me to capture the image correctly? <img src="https://user-images.githubusercontent.com/73963976/171378914-a04d643f-ad7a-4f1f-8fa6-83d0273a46d2.png" alt="image" /></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>