Как преобразовать мой HTML Div на холст без использования HTML2canvas? - PullRequest
Новая
       4

Как преобразовать мой HTML Div на холст без использования HTML2canvas?

0 голосов
/ 03 октября 2018

Мне нужно преобразовать мой HTML-div в canvas, и я сейчас использую html2canvas, но он захватывает только видимую часть окна.я хочу сказать, что это не захват всего погружения с горизонтальной прокруткой.

Так есть ли способ захватить весь div с горизонтальной прокруткой или любое предложение в html2canvas для того же.

здесьэто код, который я использовал 

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

1 Ответ

0 голосов
/ 03 октября 2018

Вы должны использовать scrollWidth & scrollHeight и установить overflow: visible; для получения содержимого, которое не видно.

Рабочий пример 

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