如何在不使用 html2canvas 的情况下将我的 html div 转换为画布？答案

【问题标题】：how to convert my html div to canvas without using html2canvas?如何在不使用 html2canvas 的情况下将我的 html div 转换为画布？
【发布时间】：2019-03-08 07:44:24
【问题描述】：

我需要将我的 html div 转换为画布，我现在正在使用 html2canvas 但它只捕获窗口的可见部分。我的意思是说它不是捕获具有水平滚动的整个潜水。

那么有什么方法可以通过水平滚动或 html2canvas 中的任何建议来捕获整个 div。

这是我使用的代码

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

【问题讨论】：

请发布您正在使用的代码
我已添加，请查看

标签： javascript html2canvas

【解决方案1】：

您必须使用scrollWidth & scrollHeight 并设置overflow: 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>

【讨论】：

画布高度和宽度与滚动高度和宽度相同，但图像被剪切或捕获只是显示在窗口屏幕中
感谢您的解决方案，scrollWidth 和 scrollHeight 帮助我解决了我面临的问题。
我只是想用vanilla js，把HTML转成canvas，再把canvas转成图片
Sorry dude!