标签: html2canvas

这让我发疯。我只是想 html2canvas 捕获图像

我有这个：

<div id="post" class="xx">Déposer</div>
<canvas width="500" height="200"></canvas>

<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
   var canvas = document.querySelector("canvas");
   html2canvas($("#post"), {canvas: canvas}).then(function(canvas) {
        var img = canvas.toDataURL()
        window.open(img); 
   });
</script>

结果是这张图：

该按钮出现在画布的底部，我只想保留该按钮，关于如何仅获取该按钮的任何想法？

如果我改变画布的大小，那么结果是这样的：

这是按钮的代码：

<div id="post">
    <div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
   <div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
     <div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>

和文件：

这使得这个按钮（页面中没有额外的 css）：

我为此使用 html2canvas 插件。

我目前正在使用此代码。

 html2canvas($("#chartDiv"), {                              
  onrendered: function (canvas) {

   var win = window.open();
   win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
   win.print(); 
  }
});

当我将 div 转换为画布时，只有窗口的可见部分变成了画布。

我需要找到一个解决方案，如果 div 超过窗口的大小，我可以将 div 打印成多页。?

预先感谢

我正在尝试将 html 代码转换为图像文件（png、jpg 等）。但是，我尝试过的所有方法都不起作用，因为我的 HTML 代码具有这样的 SVG 元素：

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150.000000 150.000000" preserveAspectRatio="xMidYMid meet" class="img30p icon-main-color">
    <g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <path d="M572 1430 c-233 -62 -408 -227 -490 -459 -24 -69 -27 -89 -27 -221 0 -132 3 -152 27 -221 39 -110 92 -194 172 -275 81 -80 165 -133 275 -172 69 -24 89 -27 221 -27 132 0 152 3 221 27 110 39 194 92 275 172 80 81 133 165 172 …

我正在使用jsPDF和html2canvas将 a 转换div为pdf：

<a onclick="makePdf()">PDF</a>
<div id="divToPdf">Some content here</div>

但是我不希望我的div显示在屏幕上。我尝试使用hidden属性来隐藏div：

<a onclick="makePdf()">PDF</a>
<div id="divToPdf" hidden>Some content here</div>

问题是该hidden属性会生成一个空白的 pdf文档。如果div没有这个问题，我该如何隐藏？

我正在使用 jspdf 和 html2canvas 组合将 html 页面保存为 pdf。单击按钮时，将保存当前页面的 pdf 副本。问题是，如果您放大页面，然后单击按钮，则保存的 pdf 包含当前页面的不完整部分。由于缩放而在页面上不可见的大部分部分在保存的 pdf 页面中被截断。解决办法是什么？以下是单击保存按钮时调用的 js 代码-

var pdf = new jsPDF('l', 'pt', 'a4');
var source = $('#someId')[0];
var options = {
   background  : '#eee'
};

pdf.addHTML(source, options, function(){
pdf.save('abcd.pdf');
});

编辑

从 Saurabh 的方法中汲取灵感，我尝试了类似的方法，但没有为任何额外的 div 元素编写代码。在保存为 pdf 之前，我将屏幕尺寸设为固定宽度，打印后将宽度恢复为默认的正常宽度。它工作正常，如果失败，我们也可以随时修复屏幕的高度，这样尽管缩放，它在生成的 pdf 中看起来也很好。以下是我使用的代码：-

var pdf = new jsPDF('l', 'pt', 'a4');
var source = $('#someId')[0];
var options = {
   background  : '#eee'
};
var width = source.clientWidth;
source.style.width = '1700px';
pdf.addHTML(source, options,                 
function(){
pdf.save('abcd.pdf'); …

我从这里借用了代码，我试图让它在我的 React 应用程序中作为概念证明工作。我遇到的问题之一是行：

var pdf = new jspdf('p', 'pt', 'letter');

在这种情况下，我收到以下错误：TypeError: WEBPACK_IMPORTED_MODULE_2_jspdf .jspdf is not a constructor

如果我删除 'new' var pdf = jspdf('p', 'pt', 'letter');

我收到错误：TypeError: Object(...) is not a function

我究竟做错了什么。似乎它在所有示例中都有效，但在我的编辑器中没有:)

我目前在使用 Html2Canvas 包将复杂的 DIV 元素渲染为 CANVAS 元素时遇到问题。问题是我想写到 CANVAS 的 DIV，有

overflow: auto 

所以DIV大于屏幕比例。并在火上加油，上述所有内容都在 Angular 5 组件中，这意味着当我访问 .css 时 CSS 不可用ElementRef.nativeElement.innerHTML。

Encapsulation.None 在这里也不适合我。

HTML 到画布设置：

  async: true,
  logging: false,
  backgroundColor: null,
  allowTaint: true,
  foreignObjectRendering: true,
  removeContainer: true

结果：

注意图像周围的黑色空间，是屏幕比例，但无法渲染。

当我设置时：

foreignObjectRendering: false

我得到了非常满意的质量和我想要的尺寸。但图表如下所示：

提前致谢！这对我来说非常重要。我保证，如果我能解决这个问题，我将创建一个非常有用的 NPM 包，以在 Angular 2+ 中将元素导出为 PDF 文件

为方便起见，还附上 Html2Canvas 文档：http ://html2canvas.hertzen.com/configuration/

我正在尝试截取网页中 iframe 的屏幕截图。在我的特殊情况下，iframe 包含我客户商店之一的街景。据我搜索和阅读，我没有找到任何解决方案。

我知道有像Html2Canvasand这样的 JavaScript 库Canvas2Image，但它们无法捕获 iframe。

这是我正在研究的小提琴。

除了 iframe，这些库与每个 HTML 元素都能正常工作。

这是小提琴的 JavaScript：

$(function() { 
        $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                var context=canvas.getContext("2d"); // returns the 2d context object
                // Convert and download as image 
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});

是否存在其他捕获 iframe 的方法？是否有任何付费的第三方服务可以做到这一点？

如果 iframe 没有任何作用，是否有任何替代方法可以实现我想要做的事情？

如果需要更多信息，请告诉我。

任何帮助将不胜感激。

提前致谢

我目前正在通过 html2canvas 将 div 的内容转换为 png，但是使用 scale: 5 或 dpi: 等对随后的图像质量没有任何影响。这是 html2canvas 的结果，因为我在 pdfcon() 函数期间附加了画布，并且非常模糊:)。我已经在互联网上搜索了无济于事的答案，任何帮助将不胜感激:)。（我也在使用 Quill 编辑器）

HTML：

    <div id="editorOne" class="pdf-convert ql-container ql-snow">
        <div id="specialEdit" class="ql-editor" data-gramm="false" contenteditable="false">
            <?php echo stripslashes($newClean); ?>
        </div>
    </div>
    <button onclick="pdfcon()">Save Pdf</button>

JS：

function pdfcon() {
                html2canvas($("#editorOne"), {
                    scale: 5,
                    onrendered: function (canvas) {
                        document.body.appendChild(canvas);
                        var img = canvas.toDataURL("png");

                        var doc = new jsPDF("p", "mm", "a4");

                        var width = doc.internal.pageSize.getWidth();
                        var height = doc.internal.pageSize.getHeight();

                        doc.addImage(img, 'PNG', 0, 0, width, height);
                        doc.save('testing.pdf');
                    }
                })
            };

当我将克隆的 html 导出为 PDF 时，出现以下错误。

未捕获的无效图像，图像字典应包含 dataURL 条目（或 node.js 中的本地文件路径）

这是我的代码：

var clonedHTML = $('#ASPxScheduler1').clone(); html2canvas(clonedHTML[0], { letterRendering: 1, allowTaint: false, logging: true, useCORS: true, onrendered: function (canvas) { var data = canvas.toDataURL(); var docDefinition = { content: [{ image:数据，宽度：1100，高度：450}]，页面大小：'A3'，页面方向：'横向'}; pdfMake.createPdf(docDefinition).download("My-Calendar.pdf"); } });