标签: html2canvas

我正在尝试使用http://html2canvas.hertzen.com/来截取我的网页截图.我无法使用...初始化canvas元素

var canvas = $('body').html2canvas();

如果我能够得到一个合适的画布,我会跟着类似的东西

var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl);             // display image

不幸的是,IMO的文件非常有限.http://html2canvas.hertzen.com/documentation.html.我不相信我需要预加载,因为我没有使用任何动态图形(但我甚至没有那么远)

如果这个人在使用html2canvas进行屏幕捕获方面取得了成功,那我就太了解了

我似乎没有比这个家伙更远. 如何使用html2canvas上传截图？

我理想的解决方案将演示如何使用最少的代码创建屏幕截图 (将html复制到画布.获取toDataURL字符串.输出字符串)

任何见解都非常感激=)

我正在尝试使用html2canvas截取屏幕截图:

var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
}});

我的身体背景是透明的,因此urlData因为jpeg有黑色背景(不像浏览器中的白色).
在这种情况下,如何修复此行为并使背景颜色变为白色？

我有一个带有外部图像的HTML div.(以下是一个示例,但在实际情况下我使用的是Amazon S3,因此无法在同一台服务器上下载和存储图像)目前我正在使用html2canvas将div转换为图像.但是,外部图像始终由空格替换.

我用来捕获图像的代码:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

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

编辑: jsfiddle:https : //jsfiddle.net/0y2zxxL8/3/

我可以使用其他图书馆.我也可以在后端做到这一点.(我使用PHP + laravel 5作为后端)有没有办法用外部图像生成HTML div的"屏幕截图"？

更新编辑后,当前答案正在运行.然而,对于我的实际使用,将有多个图像,其位置由用户通过拖放设置.我仍然可以获得这个位置,但如果不能具体设置位置,对我来说会更好.

我想在我的应用程序中使用 html2canvas JS 库。通过在我的 HTML 文件中直接加载 html2canvas.js 文件，我能够在我的应用程序中使用旧版本的 html2canvas。

但新版本仅通过 npm 包支持。

当我尝试在我的 HTML 文件中包含更新的 html2canvas.js 时，它说

html2canvas 未定义

我曾尝试修改 html2canvas.js 文件，以便我可以直接在我的 HTML 文件中使用它，而无需使用任何其他包管理器或其他依赖项。

我从这里下载了 html2canvas 。我无法通过直接在 HTML 文件中加载这个文件来使用它。如下

<script type="text/javascript" src="js/html2canvas.js"></script>

我正在使用jsPDF,它使用html2canvas从一些html元素生成图像并插入.pdf文件.但是html2canvas存在问题,它会从html生成模糊的图像.见下面的例子:

HTML内容:

http://puu.sh/7SZz4.png

html2canvas生成的图片:

http://puu.sh/7SZAT.png

有没有办法解决它或有没有更好的选项来获取图像形式的HTML？

谢谢!

我想使用html2canvas,但我不知道如何.

对Hertzen没有冒犯,他制作了一个很棒的剧本,但是文档不完整所以它没有用.

我查看了JSFeedback,但整个脚本(我不得不从HTML源代码中"窃取")仅适用于他的html2canvas版本,在评论中,他说这些版本尚未准备好开源.

任何帮助都将得到真正的赞赏 - Apparatix.

我想创建一个输入按钮"保存图像":

1. 拍摄一个div的屏幕截图
2. 要求在用户的计算机上"另存为"

我已经找到了如何使用html2canvas创建潜水屏幕并在新标签中打开它,它完美地运行:

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
      }
    });
}

但是对于你来说,保存为一部分,是一种困难的部分...我发现了有趣的话题,因为我是JS(和对象)编码的新手,我有点困惑......我想我将不得不使用FileSaver.js并创建一个新的blob http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

但我不知道如何在我的html2canvas中实现saveAs,如何正确地投射新的blob ...

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);

            var blob = new Blob(img, {type: "image/jpeg"});
            var filesaver = saveAs(blob, "my image.png");
      }
    });
}

此外,我尝试通过提取base64生成的URL来做一些事情,但是对于我来说理解每一个东西都太复杂了:http: //bl.ocks.org/nolanlawson/0eac306e4dac2114c752

但是有人给我一些提示并帮助我吗？

我有一个脚本使用HTML2Canvas截取div页面内的a ,然后使用jsPDF将其转换为pdf.

问题是生成的pdf只有一页,在某些情况下屏幕截图需要多个页面.例如,屏幕截图大于8.5x11.宽度很好,但我需要它来创建多个页面以适应整个屏幕截图.

这是我的脚本:

var pdf = new jsPDF('portrait', 'pt', 'letter');
$('.export').click(function() {
      pdf.addHTML($('.profile-expand')[0], function () {
           pdf.save('bfc-schedule.pdf');
      });
 });

有什么想法我可以修改它以允许多个页面？

运行此代码然后"保存"您将获得图像差异.解决这个问题的任何解决方案？

代码示例

$(document).on("click", "#save", function() {
  html2canvas(
    $("body"), {
      onrendered: function(canvas) {
        $("#result_here").append(canvas);
        var data = new FormData();
        data.append("data", "the_text_you_want_to_save");

        var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new activeXObject("Microsoft.XMLHTTP");
        xhr.open('post', 'save_file.php', true);
        xhr.send(data);
      }
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="canvas" style="border:1px solid red; width: 300px; heght:300px; ">
  <p>hello
    <p>
      <p>??????</p>
</div>

<div id="result_here" stlye="border:1px solid blue;"></div>

<button id="save">SAVE</button>

这是我的结果

(第一个块是html,第二个块是图像的结果,你会看到差异)

我正在尝试构建一个应用程序,我需要将整个div作为图像复制到剪贴板.div可以包含嵌套的div和图像,svgs等.

我已经搜索了很多,但无法找到我的要求的任何答案.

目前,我可以将其转换为图像,并使用以下代码在新选项卡中打开它.但是,它只有在div中有纯文本时才有效.当我添加图像时,它会失败.我只是复制了黑屏.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
    <script type="text/javascript">
    function copy() {
        var c = document.getElementsByClassName('myclass')[0];
        html2canvas(c, {
            onrendered: function(canvas) {
                theCanvas = canvas;
                var image = new Image();
                image.id = "pic"
                image.src = theCanvas.toDataURL();
                image.height = c.clientHeight
                image.width = c.clientWidth
                window.open(image.src, 'Chart')
            }
        })
    }
    </script>
    <button onclick='copy()'>Copy</button>
    <div class="myclass">
        Hi There!!!!!!!!
    </div>
</body>
</html>

这有助于我在新窗口中打开图像.任何方式直接将其复制到剪贴板而不是从新窗口右键单击上下文菜单,并使其全部适用于混合内容.任何帮助,将不胜感激.

编辑:我得到的代码使用img标记在本地服务器上托管它,并使其与svg元素一起使用.但我的应用程序混合了以下标签:

<div>
    <div>
        some text here
        <svg>
            <g>...</g>
            <g>...</g>
        </svg>
        <svg> …