how can i capture the whole scrollable div tag

[Sukarnascience]

the issue which i am facing now is by center part is a scrallable div tag but when ever i take a screen shot it just the the present viewing screen... it is any way is avalable to capture the whole div tag

My JS part

import * as htmlToImage from 'html-to-image';
import download from 'downloadjs';
export default function GuestRoom(){
    const [todos,setTodos] = useState([{data:"I will complete all the Todo's of the day",id:0}])
    const [toDo,setToDo] = useState("")
    const addInTodo = (e) =>{
        setTodos([...todos,{data:toDo,id:todos.length}])
        e.preventDefault()
    }
    const deleteTodo = index =>{
        const listTodo = [...todos];
        listTodo.splice(index,1);
        setTodos(listTodo)
    }
    const [showInfo,setInfo] = useState(false)
    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')
        htmlToImage.toPng(ssPart[0])
        .then(function (image) {
            download(image, `Web-TodoOf-${dateTime}.png`);
        });
    }
    return(
        <div className="guestRoom">
            <header>
                <div className="Headder">
                    <p><FaUser size={50}/></p>
                    <h1 className="headTitle">Guest Room</h1>
                    <button className="infoIcon" onClick={()=>setInfo(!showInfo)}><RiFileInfoLine size={30} color="yellow"/></button>
                </div>
            </header>
            <main>
                <div className="ToDo">
                    { showInfo? 
                        <div className="warningData">
                            <TiWarningOutline size={20}/>
                            <p className="warningText">
                                <b>Note:</b>Hello Alien, You are now in Guest Mode. So,
                                All your Today's list may get delete just after closing this App.. 
                                So, if Today's TODO is importent You can login by your gMail account 
                                and store in our database for 24h or else you can take a screenshot 
                                of by pressing the screenshot button
                            </p>
                            <button className="infoIcon" onClick={()=>setInfo(!showInfo)}><RiCloseCircleLine size={20}/></button>
                        </div> : null
                    }
                    <h2><FaClipboardCheck/> I have Todo:</h2>
                    <ul>
                        {todos.map((todo,index)=>(
                            <li id={todo.id}>
                                <div className="TodoListPart">
                                    <p>{todo.data}</p>
                                    <p className="deleteAlign">
                                        <button className="deleteAlignbtn" onClick={()=>deleteTodo(index)}>
                                            <MdDeleteForever size={20}/>
                                        </button>
                                    </p>
                                </div>
                            </li>))}
                    </ul>
                </div>
            </main>
            <footer>
                <div>
                    <form className="inputGrid" onSubmit={addInTodo}>
                        <input 
                            type="text" 
                            className="insertData" 
                            placeholder="I have todo ..." 
                            value={toDo} 
                            onChange={(e)=>{setToDo(e.target.value)}}/>  
                        <button type="submit" className="addTodo"><RiSendPlaneFill size={25} color="white"/></button>
                    </form>
                </div>
                <div className="screenshot">
                    <p><button className="ssBtn" onClick={downloadSS}>Take Screenshot</button></p>
                </div>
            </footer>
        </div>
    )
}

And my CSS

.warningData{
    border-radius: 5px;
    border: 1px solid rgb(252, 255, 59);
    background-color: rgba(255, 240, 36, 0.801);
    text-align: left;
    font-size: smaller;
    padding: 10px;
    padding: 0 0;
    margin: 0 0;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 5px;
    top:82px;
    right: 5px;
    position: fixed;

}

header{
    top:0;
    left: 0;
    width: 100%;
    height: auto;
    position:fixed;

}
main{
    position:static;
}
footer{
    position:fixed;
    width: 100%;
    bottom: 0;
    right: 0;
    background-color: rgb(77, 77, 77);
}

.inputGrid{
    display: grid;
    grid-template-columns: auto 15%;
    grid-column-gap: 5px;
}

.guestRoom{
    display: grid;
    grid-template-rows: auto auto auto;
    grid-row: 5px;
}

.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-image: linear-gradient(rgb(255,255,255),rgb(255,255,255),rgb(255,255,255));
}

.screenshot{
    width: 100%;
    text-align: center;
}

.infoIcon{
    background-color: transparent;
    border: transparent;
}

.warningText{
    padding: 0 0;
    margin: 0 0;
}

.Headder{
    display: grid;
    grid-template-columns: 20% auto 15%;
    grid-column-gap: 5px;
    text-align: center;
    background-color: rgb(77, 77, 77);
    color: rgb(255, 255, 255);
}
.headTitle{
    text-align: left;
    width: 100%;
}

.ssBtn{
    border-radius: 20px;
    text-align: center;
    background-color: rgba(41, 255, 184, 0.795);
    border: transparent;
    box-shadow: 0px 2px rgba(223, 223, 223, 0.808);
}

.deleteAlignbtn{
    background-color: transparent;
    border: transparent;
    width: 100%;
    height: 100%;
}

.TodoListPart{
    display: grid;
    grid-template-columns: auto 15%;
    grid-column-gap: 8px;
    background-color: transparent;
    border-radius: 0px 10px 20px 0px;
    border-right: 1px solid rgb(77, 77, 77);
    border-bottom: 1px solid rgb(77, 77, 77);
}

.deleteAlign{
    text-align: right;
}

.addTodo{
    border-radius: 50px;
    text-align: center;
    background-color: transparent;
    border:transparent;
}

.insertData{
    width: 100%;
    padding: 5px 5px;
    margin: 5px 4px;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid rgb(255, 255, 255);
    background-color: #83838377;
    border-radius: 5px;
    color:rgb(255, 255, 255);
    font-size: 16px;
}

h2{
    font-size: 30px;
    padding: 0 0;
    margin: 3px 3px;
}

[biiibooo[bot]]

👋 @Sukarnascience

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[biiibooo[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[igor9silva]

Hi @Sukarnascience, have you ever solved that? I'm facing something similar

[Sukarnascience]

Sorry to disappoint sir, I was failed to solve the problem so I change and used all other alternative library which are available but still it was not taking the long screen shot.... So after thinking about it we discontinued this idea ...

On Wed, 6 Oct 2021, 23:39 Igor Silva, @.***> wrote:

Hi @Sukarnascience https://github.com/Sukarnascience, have you ever solved that? I'm facing something similar

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bubkoo/html-to-image/issues/152#issuecomment-936820507, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALIHTPCXOQ2WR2YRIZYELNDUFSGGRANCNFSM47MCCJXA .

[igor9silva]

Dont worry! Thanks for replying @Sukarnascience

[igor9silva]

Actually, for future reference, @matheuscrepaldi solved that by increasing the canvas size.

In our use case, we had a large horizontal page, so increasing the width did the job.

[chlumpchatkupt]

I resolved the issue by resizing the container div: https://github.com/bubkoo/html-to-image/issues/43#issuecomment-1021304264

[biiibooo[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.