标签: html2canvas

我甚至不知道如何做到这一点,html2canvas的文档在这部分并没有真正的帮助.

我可以用这一小段代码制作我的html截图:

target = $('#myDiv');
        html2canvas( target, {
        onrendered: function( canvas ) {
            /* canvas is the actual canvas element, 
               to append it to the page call for example 
             */
               document.body.appendChild( canvas );
            }
        })

但我希望能够传递一个网址并制作此页面的屏幕截图.就像他们在他们的示例页面中所做的那样:http://html2canvas.hertzen.com/screenshots.html

如果有人能给我一个提示如何开始,我会很高兴.

我正在尝试实际查看 html2canvas 正在呈现的字符串图像。我有一个从超链接打开的网页。最后我想使用图像按钮来截取网页的屏幕截图。我正在获取 base64 字符串，但如何查看字符串图像？

      $(document).ready(function(){         

      html2canvas(document.body,{
          onrendered: function (canvas){
              var data = canvas.toDataURL();
              alert(data);
          },
          width:300,
          height:300
      });

我正在一个项目中，我需要在客户端生成pdf文件（onclick saveFile as PDF），因为一些数据不会发送到服务器。我已经阅读了有关这些可用选项的信息；fileSaver.js和html2canvas似乎没有帮助。我也想指出，JavaScript并不是很好。这是我的js代码

<script type="text/javascript">
$(document).ready(function() {
    $("#saveOutput").click(function() {
        $("#Screenshot").html2canvas({ 
                onrendered: function(canvas) {
                var png = canvas.toDataURL()
                window.open(png);
              }
            });
          });
  });

和我的HTML

 <div id="Screenshot">
<p>This is it</p>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" style="height: 250px; width: 250px;">       
      <circle id="1" cx="100" cy="100" r="25" fill="#A52A2A"></circle>
  </svg>
</div>
<div id="content">
    <a class="button" id="saveOutput" href="#">Save as File</a>
</div>

为什么无法显示SVG文件？这些文件如何转换为Canvas？有人可以向我展示代码示例吗？任何帮助将不胜感激

我知道如何捕获网页，但我问如何捕获桌面或桌面中的其他应用程序？如果无论如何要突出显示屏幕的一部分。就像 html2canvas 为网页所做的那样，我们可以使用 HTML/JS 中的浏览器应用程序为桌面应用程序做一些事情吗？

在Angular 2项目中,我安装了版本号为0.5.0beta的html2canvas模块.

然后在我的TS文件中,我将其导入为:

import html2canvas from 'html2canvas';

然后在我写的pdfDownload方法中,

html2canvas (document.getElementById('exportthis'), {
                        onrendered : function (canvas) { 

在此之后,当我执行npm start命令时,我得到了错误,

onrendered不是html2canvasOptions中定义的属性.

任何人都可以帮我解决这个问题吗？这是我第一次使用angular 2和html2canvas.

我的功能有问题flatten

这是代码：

    function flatten(arrays) {
    return [].concat.apply([], arrays);
}

有一个最大超出的错误，所以我尝试将函数更改为：

    function flatten(arrays){
    return arrays.reduce(function(prev, curr){
        return prev.concat(curr);
    }, []);
}

错误消失了，但速度太慢了。是否有 concat 的替代代码。

我正在使用html2pdf库生成凭证。

这适用于在页面中显示为 HTML 的凭证。

我有一个按钮，html2pdf()点击时触发该功能，提示用户接受 PDF 下载。

我希望 HTML 不显示在页面上。我尝试应用position: absolute;HTML 并将其放置在远离用户视线的地方。不幸的是，PDF 然后呈现为空白。

有没有办法实现这一目标？

我想使用jsPDF.html将html页面转换为pdf，我正在使用以下代码：

savePdf () {
  var pdf = new jsPDF({unit: 'mm', format: 'a4', orientation: 'portrait' })
  pdf.html(document.getElementById('printable-cv'), {
    callback: function (pdf) {
      pdf.save('cv-a4.pdf');
    }
  })
}

但是我得到了错误html2canvas not loaded：我忘了吗？我有html2canvas

“ html2canvas”：“ ^ 1.0.0-alpha.12”

我正在将vuejs与webpack一起使用。

在同一页面中，我当前正在使用带有以下代码的html2pdf：

savePdf0 () {
  let opt = {
    filename: 'cv.pdf',
    enableLinks: true,
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: {
      scale: 8,
      useCORS: true,
      width: 310,
      letterRendering: true,
    },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
  }
  html2pdf().set(opt).from(document.getElementById('printable-cv')).save() …

我试图弄清楚如何使用 jsPDF.html()方法调整 HTML 元素的大小。

我尝试使用下面的代码，但该width选项似乎没有对输出进行任何更改。

我只是假设width是一种选择.html()，不幸的是，到目前为止，没有此方法的文档，人们应该从代码中猜测它。

另外，在我看来，它应该从html2canvas options中获取选项，这就是我尝试使用width.

无论如何，代码：

var legend = document.getElementById("my-table");
var pdf = new jsPDF(orientation, undefined, format);
pdf.html(legend, {
    width: 200,
    callback: function () {
        window.open(pdf.output('bloburl'));
     }
});

#我的表

<table>
    <tr>
        <td><img src="image1.jpeg"></td>
    </tr>
    <tr>
        <td><img src="image2.jpeg"></td>
    </tr>
    ...
</table>

我有一张通过leaflet.

我需要使用html2canvas.

为了使用html2canvas，我需要提供一个 DOM 元素来捕获 ( elementToCapture) 和一个可选的配置 ( html2canvasConfiguration)。

var html2canvasConfiguration = {
    useCORS: true,
    width: map._size.x,
    height: map._size.y,
    backgroundColor: null,
    logging: true,
    imageTimeout: 0
};

var elementToCapture = map._container.getElementsByClassName('leaflet-pane leaflet-map-pane')[0];
html2canvas(elementToCapture, html2canvasConfiguration).then(function (canvas) {
    var link = document.createElement('a');
    link.download = 'test.png';
    link.href = canvas.toDataURL();
    link.click();
    link.remove();
})

我按leaflet-pane leaflet-map-pane类提取一个元素，它基本上代表整个地图，包括控件（放大/缩小按钮、比例等）、自定义标记、工具提示、叠加层、弹出窗口。

整个 DOM 看起来像

<div class="leaflet-pane leaflet-map-pane">
    <div class="leaflet-pane leaflet-tile-pane">
        <div class="leaflet-gl-layer mapboxgl-map">
            <div class="mapboxgl-canvas-container">
                <canvas class="mapboxgl-canvas leaflet-image-layer leaflet-zoom-animated"></canvas>
            </div> …