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>...........

style.css

#upsideDiv{ width:300px; heighth:300px; overflow:scroll; } #insideDiv{ width:auto; heighth:auto; }

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

@piyushSinghalDemo

[Mahmuduman]

Finally; https://jsfiddle.net/2m8dcr63/32/

[najor]

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/

[Sugam-intelligaia]

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 ?

[sryara]

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?

You need to get scrollable-div to convert image not the parent div.

[palminha]

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/

this solves the problem! GREAT!

[Sukarnascience]

I have also same issue but i am fail to solve this please help me tooo...

My React JS Part

import domtoimage from 'dom-to-image';
import download from 'downloadjs';
// ...
const downloadSS = () =>{
        
        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`);
        });
    }
//...
<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

.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);
}

[lokeshsasapu]

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?