标签: html2canvas

我正在使用http://html2canvas.hertzen.com/将我的 html 转换为画布。这是一个很棒的剧本。
它与英文字体配合得很好......但我正在使用古吉拉蒂字体。我包括来自 css (@font-face) 的字体，
它在 Firefox 中运行良好，但在 chrome 中它不显示确切的字符。
这段代码中我缺少任何选项吗？

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 300,
  height: 300
});

我正在使用 html2canvas 插件对我的网页进行屏幕截图，效果非常好。然而，页面上的一个 div 是可以缩放的，这在截图时似乎会引起问题。这是截取屏幕截图的代码。

 function screenshot(fileName){

        html2canvas(document.body, {
            onrendered: function(canvas) {
                var myImage = canvas.toDataURL("image/png");
                var image = myImage.replace('data:image/png;base64','');
                window.open(myImage);
            }

         });

有没有一种简单的方法来更新 dom，以便在缩放 div 时，html2canvas 截取最新网页的屏幕截图，或者这是不可能的。

有人有使用其他插件的经验吗？这可能是一个不错的选择？谢谢你的帮助！

我正在使用 Html2canvas 来截取 div 的屏幕截图并将其显示在新窗口中。这是我的 JavaScript 函数

function capture() {
html2canvas(document.getElementById('screenshot'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");    
window.open(img);
}}
);
}

这段代码的问题是它只捕获了 div 的一半，如下图所示：

我将要捕获的元素的 ID 更改为“table”，这样我就只能对表进行屏幕截图。但看起来屏幕截图只占据了目标 div 的一半（就高度而言）。

现在当我选择全身时：

function capture() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
}
});

结果如下：

我正在使用 jsPDF 和 html2Canvas 生成 PDF。

如果我以 document.body 为目标，它就会起作用。

<script type="text/javascript">
  function pdfDownload() {
  var pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addHTML(document.body, function () {
  pdf.save('test.pdf');
  });
}</script>

但是，如果我尝试在 div #pdfcontent 上使用 id，我会得到：

“未捕获错误：提供的数据不是 JPEG”

<script type="text/javascript">
  function pdfDownload() {
  var pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addHTML($('#pdfcontent')[0], function () {
  pdf.save('test.pdf');
  });
}</script>

请帮助

我已经使用html2canvas.js来截取特定 div 的屏幕截图，现在我想知道是否可以使用 js 将canvas元素作为图像复制到剪贴板，然后用户只需单击即可在剪贴板上获得他们想要的图像，他们所需要做的就是粘贴它。

Codepen 演示

我尝试打印页面的屏幕，然后将其保存到 中base64，效果很好，但看起来svg元素被忽略，并且某些css样式效果不好，例如:before和:after，原始页面看起来 -

但转换后看起来像这样 -

您可以看到右侧的圆圈:before被忽略，顶部菜单中的箭头和:after选项卡上的箭头以及添加新选项卡按钮 (+) 相同。我的转换代码看起来 -

printOnePage(){
        document.getElementById('helpPage').style.display= 'none';
        let page = document.getElementById('appContainer');
        html2canvas(page,{
            onrendered: function(canvas) {
                $('#img_val').val(canvas.toDataURL("image/png"));
                console.log(document.getElementById('img_val'));
                //document.getElementById("phpSendForm").submit();
            }
        });
        document.getElementById('helpPage').style.display= '';

    }

有什么提示可能会导致这种情况吗？

通过查看jsdom的文档，似乎支持canvas。然而给出的唯一解释是：

jsdom 支持使用 canvas 或 canvas-prebuilt 包通过 canvas API 扩展任何元素。为了实现这一点，您需要将 canvas 作为项目中的依赖项，作为 jsdom 的对等项。如果 jsdom 可以找到 canvas 包，它将使用它，但如果它不存在，则元素的行为将类似于 s。

这对我一点帮助都没有。我通过npm安装了canvas-prebuilt并在 jsdom 之前导入了 canvas-prebuilt

import canvas from 'canvas-prebuilt';
import jsdom from 'jsdom';

const dom = new JSDOM(html);
let domcanvas = await html2canvas(dom, {
  dpi: dpi,
  useCORS: true,
  timeout: 20000
});

No canvas support

exports.Canvas = null; …