标签: html2canvas

在我的程序中，我尝试对某些页面进行 PDF 导出，但是当 HTML2Canvas 尝试处理我拥有的元素时遇到以下错误：

无法在克隆的 iframe 中找到元素

并且仅此而已。这是我使用的代码：

public exportToPdf(
    selectedFilter: SelectedFilter,
    currentTime: string,
    idOfExportDiv: string[]
  ): void {
    this.addClassToMainDiv();

    const elementsToScreenshot: HTMLElement[] = [];

    for (let index = 0; index < idOfExportDiv.length; index++) {
      elementsToScreenshot.push(document.getElementById(idOfExportDiv[index]));
    }

    const fileName = 'export-' + currentTime + '.pdf';
    this.download(elementsToScreenshot, fileName, selectedFilter, currentTime);
  }

以及下载功能：

  download(elementById: HTMLElement[], name, selectedFilter: SelectedFilter, currentTime: string) {
    const html2canvasPromises: Promise<unknown>[] = [];

    for (let index = 0; index < elementById.length; index++) {
      html2canvasPromises.push(
        html2canvas(elementById[index], {
          useCORS: true …

如下图所示，我用 html2canvas 生成的画布有一个奇怪的深色背景。我已经将 body、html 和大多数 div 背景调整为白色，但没有任何效果。我可以使用一个选项来修改它吗？

谢谢

我正在使用html2canvas库来截取 HTML 节点的屏幕截图，但它根本无法识别该clip-path属性。

（我尝试在这里复制错误时遇到跨域问题，所以我做了一个jsfiddle）

https://jsfiddle.net/1Ly9wn6k/

<div id="root">
  <div class="star-mask">
    <div class="square"></div>
  </div>
</div>

<button onclick="capture()">Capture</button>

.star-mask {
  clip-path: path('m55,237 74-228 74,228L9,96h240');  
}

.square {
  background-color: red;
  width: 200px;
  height: 150px
}

function capture() {
  let node = document.querySelector('.star-mask')


  html2canvas(node)
    .then(canvas => {
      document.querySelector('#root').appendChild(canvas)
    })
}

每次我单击“捕获”时，画布屏幕截图完全忽略clip-path星形并仅显示红色方块。我已经尝试过html2image库并遇到了同样的问题。

还有其他解决方案可以解决这个问题吗？或者目前无法clip-path使用 JavaScript 捕获属性？

我已经花了好几天的时间来解决这个问题，但我无法解决这个问题，可能是因为缺乏 html2canva 的知识，或者它不想被修复。我唯一想要的是将我的 pdf 放在 a4 大小的单页上，但它总是呈现在两页上。不知道我哪里错了。请提出建议。

这是我的代码：

document.querySelector(\'#temp\').contentEditable = true;\n\nfunction createpdf() {\n  let body = document.body\n  let html = document.documentElement\n  let height = Math.max(body.scrollHeight, body.offsetHeight,\n    html.clientHeight, html.scrollHeight, html.offsetHeight)\n  let element = document.querySelector(\'#temp\')\n  let heightCM = height / 35.35\n  html2pdf(element, {\n    margin: 1,\n    filename: \'MyResume.pdf\',\n    image: {\n      type: \'jpeg\',\n      quality: 4\n    },\n    html2canvas: {\n      dpi: 400,\n      letterRendering: true,\n      scale: 3\n    },\n    jsPDF: {\n      orientation: \'portrait\',\n      unit: \'cm\',\n      //   format: [heightCM, 50]\n      format: \'a4\'\n\n    }\n  }).save()\n}

在我的 Nuxt PWA 中，我有一个函数可以使用这个包将 HTML 转换为 Canvas 。生成的图像采用 64 进制。现在我希望能够通过以下方式共享该图像：Whatsapp、Facebook、电子邮件、Instagram 等。我找到了几个软件包，但它们似乎都不支持仅共享文件 URL 和文本。

这是我的分享功能：

shareTicket(index) {
  html2canvas(this.$refs['ticket-' + index][0], {
    backgroundColor: '#efefef',
    useCORS: true, // if the contents of screenshots, there are images, there may be a case of cross-domain, add this parameter, the cross-domain file to solve the problem
  }).then((canvas) => {
    let url = canvas.toDataURL('image/png') // finally produced image url

    if (navigator.share) {
      navigator.share({
        title: 'Title to be shared',
        text: 'Text to be shared',
        url: this.url,
      }) …

我生成画布并将其传递给php所以:

$('body').on('click','#save_image',function(){
                html2canvas($('.myImage'), {
                    onrendered: function(canvas) {
                        //$('.imageHolder').html(canvas);
                            var dataURL = canvas.toDataURL("image/png");

                           // $('.imageHolder').append('<img src="'+dataURL+'" />');
                            $('.imageHolder').html('Generating..');
                            $.post('image.php',{image: dataURL},function(data){
                                $('.imageHolder').html(data);
                            });
                    }
                });
 });

image.php:

<?
    $image = $_POST['image'];
    echo "<img src='$image' alt='image' />";
    $decoded = str_replace('data:image/png;base64,','',$image);
    $name = time();
    file_put_contents("/home/toni005/public_html/toniweb.us/div2img/" . $name . ".png", $decoded);
    echo '<p><a href="download.php?img='.$name.'.png">Download</a></p>';
?>

的download.php:

    <? $file = $_GET['img'];
header('Content-Description: File Transfer');
header("Content-type: image/jpg");
header("Content-disposition: attachment; filename= ".$file."");
readfile($file);
?>

问题是生成图像,当我点击下载链接时,下载被伪造但图像无法打开(似乎已损坏)

我错过了什么？

它可以在这里测试:http://toniweb.us/div2img/

我正在使用html2canvas 0.4.0渲染截图,并希望将其保存为我的网络服务器上的图像.

为此,我编写了以下函数:

JavaScript的

function screenShot(id) {

    html2canvas(id, {
        proxy: "https://html2canvas.appspot.com/query",
        onrendered: function(canvas) {

            $('body').append(canvas); // This works perfect...

            var img = canvas.toDataURL("image/png");
            var output = img.replace(/^data:image\/(png|jpg);base64,/, "");

            var Parameters = "image=" + output + "&filedir=" + cur_path;
            $.ajax({
                type: "POST",
                url: "inc/saveJPG.php",
                data: Parameters,
                success : function(data)
                {
                    console.log(data);
                }
            }).done(function() {
            });

        }
    });
}    

saveJPG.php

<?php
    $image = $_POST['image'];
    $filedir = $_POST['filedir'];
    $name = time();

    $decoded = base64_decode($image);

    file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX); …

我在这个表单中有一个id ="form1"的表单我有一个图表.现在我使用html2canvas来获取此form1的图像.这是我的代码..

<script type="text/javascript">

      $(document).ready(function () {
          $('#add_button').click(function () {
              alert("hiii");
              $('form1').html2canvas();
              var queue = html2canvas.Parse();
              var canvas = html2canvas.Renderer(queue, { elements: { length: 1} });
              var img = canvas.toDataURL();
              window.open(img);
              alert("Hello");
          });
      });

  </script>

<form id="form1" runat="server">
<div style="padding-left:150px">
  <asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>
<div style="padding-left:350px"><b>Demo</b></div>
</form>

 <input type="submit" id="add_button" value="Take Screenshot Of Div" " />

所以我的问题是如何将此图像保存到我的系统硬盘中.请帮助我.

这是我的网站我想要我的nav元素的背景模糊..我使用html2canvas和stackblur为此,你可以在这里找到教程.我现在的问题是我要排除nav元素在画布中的渲染,所以它只在滚动时显示背景(目前它只在wekit浏览器中工作,因为我不知道如何添加多个属性到

"-webkit-改造",

提前致谢.这是我的代码:

<script>
    $(function () {
    html2canvas($("body"), {
        onrendered: function (canvas) {
            $("div.blurnav, div.blurnav.small").append(canvas);
            $("canvas").attr("id", "canvas");
            stackBlurCanvasRGB(
                'canvas',
            0,
            0,
            $("canvas").width(),
            $("canvas").height(),
            20);
        }
    });
    vv = setTimeout(function () {
        $("body").show();
        clearTimeout(vv);
    }, 200);
    });

    $(window).scroll(function () {
    $("canvas").css(
        "-webkit-transform",
        "translatey(-" + $(window).scrollTop() + "px)");
     });

     window.onresize = function () {
    $("canvas").width($(window).width());
     };

     $(document).bind('touchmove', function () {
     $("canvas").css(
        "-webkit-transform",
        "translatey(-" + $(window).scrollTop() + "px)");
     });

    $(document).bind('touchend', function () {
    $("canvas").css(
        "-webkit-transform",
        "translatey(-" + $(window).scrollTop() …

我正在尝试使用html2canvas库将 div 转换为图像。我试过但没有成功无法将完整的 div 转换为图像，图像中缺少滴管。

网址：https : //www.makethatvape.com/ejuicecalc/

用代码试过：

html2canvas($("#widget")).then(function(canvas) {
   bimg = canvas.toDataURL();  // by default png
});

所以，任何想法如何克服这个问题。我玩过 html2canvas，它适用于文本和 CSS div 到画布的转换。