how to convert my html div to canvas without using html2canvas?

Question

i need to convert my html div to canvas and i am using html2canvas right now but it only captures the visible part of the window. i mean to say it is not capture the whole dive which has horizontal scroll.

So is there any way to capture whole div with horizontal scroll or any suggestion in html2canvas for the same.

here is the code i used

var element = document.getElementsByClassName('ppm_portlet_data');

    html2canvas(element[0], { width: element[0].offsetWidth, height: element[0].offsetHeight }).then(function (canvas) {
            console.log(canvas.toDataURL());
            Canvas2Image.saveAsPNG(canvas);
            console.log(canvas.width, canvas.height);
         });

Answer 1

You have to use scrollWidth & scrollHeight and set overflow: visible; in order to get content that is not visible.

Working Example

const div = document.querySelector('#content');
div.innerText = div.innerText.split(' ').join(''); // just for overflowing content

div.addEventListener('click', event => {
    html2canvas(div, { width: div.scrollWidth, height: div.scrollHeight }).then(canvas => {
        document.body.appendChild(canvas);
        console.log(canvas.width, canvas.height); // outputs greater width than browser width
    });
});

#content {
    overflow: visible; /* make overflow visible to capture */
    word-wrap: nowrap;
}

<body>
    <div id='content'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    </div>

  <script type="text/javascript" src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'></script>
</body>

how to convert my html div to canvas without using html2canvas?

Question

1 answers

solution1
2 2018-10-03 19:14:43

Working Example

how to convert my html div to canvas without using html2canvas?

Question

1 answers

solution1 2 2018-10-03 19:14:43

Working Example

solution1
2 2018-10-03 19:14:43