标签: html2canvas

在 html2canvas/jspdf 中添加边距

我使用html2canvas和jspdf将多页网页导出为pdf。但是，生成的 pdf 中没有边距。如何使用 html2canvas 或 jspdf 添加边距。

html2canvas(document.body, {
    scale: 0.8,
    logging: true,
    allowTaint: false,
    backgroundColor: null
}).then(function(canvas) {
    // Export the canvas to its data URI representation
    var base64image = canvas.toDataURL("image/jpeg");
    console.log('Report Image URL: ' + base64image);

    var imgWidth = 295; 
    var pageHeight = 210;  
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;    
    var doc = new jsPDF("l", "mm", "a4"); // landscape
    var position = 0;

    var width = doc.internal.pageSize.getWidth();
    var height = doc.internal.pageSize.getHeight();    
    doc.addImage(base64image,'JPEG', …

Run Code Online (Sandbox Code Playgroud)

html2canvas

And*_*ndy

lucky-day

1
推荐指数

1
解决办法

1万
查看次数

html2canvas基础知识

    <html>

    <head>
    <title>test</title>
    <script src="external/jquery-1.6.2.js"></script> 
    <script type="text/javascript" src="js/html2canvas.js"></script> 

    <script type="text/javascript">
     $(document).ready(function() {
     $('body').html2canvas();
     var queue = html2canvas.Parse();
     var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
     var img = canvas.toDataURL()
     window.open(img);
 });
    </script>
    </head>

    <body>         
    <h1>Testing</h1>
    <img src='http://localhost:8080/test/images/1.jpg'>
    </body>
    </html>

Run Code Online (Sandbox Code Playgroud)

我不应该看到这个网页作为图像打开一个新窗口吗？我错过了什么？

javascript screenshot html2canvas

Chr*_*ris

2012 10-31

0
推荐指数

1
解决办法

9942
查看次数

Javascript - 将带有SVG的HTML div转换为图像

我使用Highcharts绘制图形.

我想添加"导出到PNG"选项,其中包括Highcharts图和外部div.使用Highcharts导出时,我无法添加包含图表的外部div.

我在这里看到了几个使用html2canvas的例子.当我尝试使用它时,Highcharts的SVG元素不包含在输出图像中.

有没有人知道一个解决方案,比试图在外部HTML div图像中合并SVG图像更好？

更新 -

使用最新版本的html2canvas修复了该问题,但输出略有不同:

原版的:

html2canvas输出:

如您所见,某些元素在不同位置呈现两次.

谁知道怎么解决？

javascript svg highcharts html2canvas

Bob*_*der

2015 11-09

0
推荐指数

1
解决办法

7964
查看次数

如何使用画布 90° ccw 旋转从 div 呈现的 .png？

首先让我说我是使用 Canvas 元素的新手。我已经设法使用 jQuery 和 html2canvas.js 将 div 呈现为 png，但我想将 png 逆时针旋转 90 度。

我假设我需要在画布阶段执行此操作，然后将其作为 png 输出，以便即使在下载图像时也能保持持久性- 我将如何进行并完成该操作？

这就是我目前所拥有的，它正在工作（减去旋转）

html2canvas($("#portrait_back_div"), {
    onrendered: function (canvas) {
        //document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');

        var image = new Image();
        image.src = data;
        document.getElementById('portrait_back_png').appendChild(image);
        //$( "#portrait_back_div" ).hide();
    }
});

Run Code Online (Sandbox Code Playgroud)

我很感激我能得到的任何帮助，即使这似乎是一个基本问题。这个小提琴的工作原理与我的项目相同，你想看看。

javascript jquery png canvas html2canvas

Len*_*nny

2016 06-22

0
推荐指数

1
解决办法

1330
查看次数

在jquery中使用html2canvas将html元素导出到Png文件时如何设置自定义文件名？

我的应用程序中有一个按钮，可以将 html div 导出到 png 文件。我在 jquery 中使用 html2canvas 库做到了。这里的问题是当文件被下载时，它会以默认名称“下载”下载。我需要使用自定义名称下载。我在下面提供了代码。任何帮助表示赞赏。

 $("#btnPng").click(function () {
                       html2canvas($("#pulledPopUp"), {
                onrendered: function (canvas) {
                 theCanvas = canvas;
                    Canvas2Image.saveAsPNG(canvas);
                                   }
            })

        });

Run Code Online (Sandbox Code Playgroud)

jquery html2canvas

vin*_*esh

lucky-day

0
推荐指数

1
解决办法

3270
查看次数

在Jquery中使用html2canvas.js时,Png文件无法在Internet Explorer中下载

我的应用程序中有一个按钮,它将html元素导出到png文件.我是通过使用html2canvas.js完成的.它在Google Chrome和Mozilla Firefox浏览器中运行良好.但它无法在Internet Explorer中运行.当我在IE中单击该按钮时,它只显示空白页面.我提供了以下代码.任何帮助表示赞赏.

  $("#btnPng").click(function () {
            $("#divPulledPopUpButtons").hide();
            html2canvas($("#pulledPopUp"), {
                onrendered: function (canvas) {
                    var url = canvas.toDataURL();
                    $("<a>", {
                        href: url,
                        download: "CAR.png"
                    })
                    .on("click", function () { $(this).remove() })
                    .appendTo("body")[0].click()
                    $("#divPulledPopUpButtons").show();
                }
            })
        });

Run Code Online (Sandbox Code Playgroud)

jquery html2canvas

vin*_*esh

lucky-day

0
推荐指数

1
解决办法

1819
查看次数

JSPDF 和 html2canvas 与 Angular

我正在尝试使用 html2canvas 生成 PDF，但是在调用该函数时抛出错误，我的 TS 如下：

  @ViewChild('content') content:ElementRef;

  generarPDF() {
    html2canvas(document.getElementById('content'), {
      // Opciones
      allowTaint: true,
      useCORS: false,
      // Calidad del PDF
      scale: 1
    }).then(function(canvas) {
      var img = canvas.toDataURL("image/png");
      var doc = new jsPDF();
      doc.addImage(img,'PNG',7, 20, 195, 105);
      doc.save('postres.pdf');
    });
  }

Run Code Online (Sandbox Code Playgroud)

我的html是：

  @ViewChild('content') content:ElementRef;

  generarPDF() {
    html2canvas(document.getElementById('content'), {
      // Opciones
      allowTaint: true,
      useCORS: false,
      // Calidad del PDF
      scale: 1
    }).then(function(canvas) {
      var img = canvas.toDataURL("image/png");
      var doc = new jsPDF();
      doc.addImage(img,'PNG',7, 20, 195, 105);
      doc.save('postres.pdf');
    });
  }

Run Code Online (Sandbox Code Playgroud)