标签: html2canvas

我想使用 JavaScript 在我的 html 文件中对谷歌地图进行“屏幕截图”。

地图当前正在加载div标签，因此我无法使用此<div>标签获取图像。

但是如果我可以在画布中加载它，<canvas>那么我可以很容易地截取它的屏幕截图，谁能告诉我这个问题的解决方案 - 也就是说，我如何在画布中加载谷歌地图。

或者是否有任何替代解决方案？

在我的应用程序中,我html2canvas用于将HTML转换为画布,之后我将使用toDataURL()chrome中的所有内容将该画布转换为图像,图像在页面加载后立即下载,但在safari中将图像加载到同一页面没有下载.

$(document).ready(function(e) { 
    html2canvas(document.body, {
        onrendered: function(canvas) {
        var test = document.getElementsByClassName('test');      //finding the div.test in the page
        $(test).append(canvas);                               //appending the canvas to the div
        var canvas = document.getElementsByTagName('canvas');       
        $(canvas).attr('id','test');                              //assigning an id to the canvas
        var can2 = document.getElementById("test");
        var dataURL = can2.toDataURL("image/png");
        document.getElementById("image_test").src = dataURL;     //assigning the url to the image
        $(canvas).remove();                                   //removing the canvas from the page
        download(can2,'untitled.png');
        function download(canvas_name,filename)
        {
            var tempLink = document.createElement('a');
            e; 
            tempLink.download = filename;
            tempLink.href = dataURL;
            if …

我在我的应用程序中使用了svg图标并使用了svg来绘制图表.当我使用html2canvas生成图像时,所有svgs都被忽略并且生成的图像没有所有svgs.

我正在使用下面的函数来生成图像.

function svgToCanvas (targetElem) {
        var nodesToRecover = [];
        var nodesToRemove = [];

        var svgElem = targetElem.find('svg');

        svgElem.each(function(index, node) {
            var parentNode = node.parentNode;
            var svg = parentNode.innerHTML;

            var canvas = document.createElement('canvas');

            canvg(canvas, svg);

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        });

        html2canvas(targetElem, {
            allowTaint: true,
            onrendered: function(canvas) {
                // var ctx = canvas.getContext('2d');
                // ctx.webkitImageSmoothingEnabled = false;
                // ctx.mozImageSmoothingEnabled = false;
                // ctx.imageSmoothingEnabled = false;

                var img_PNG = Canvas2Image.saveAsPNG(canvas);
            }
        }); …

我正在尝试让html2render ( http://html2canvas.hertzen.com/ ) 在我的网站上工作。它适用于基本内容 - 但没有任何图像显示（因为它们位于 cdn.domain.com 子域上）。

我一直在阅读，似乎它不喜欢开箱即用的其他域。我找到了几个 PHP 代理脚本：

• https://github.com/brcontainer/html2canvas-php-proxy
• https://github.com/adjdred/html2canvas-proxy-php

我试图让这些继续下去，但我们没有在此服务器上启用curl 。所以，我打算用 Perl 写一些东西。

这是我到目前为止所得到的：

use MIME::Base64;
use File::Slurp;

handle();

sub handle {

    print ('Access-Control-Max-Age:' . 5 * 60 * 1000);
    print ("Access-Control-Allow-Origin: *");
    print ('Access-Control-Request-Method: *');
    print ('Access-Control-Allow-Methods: OPTIONS, GET');
    print ('Access-Control-Allow-Headers *');
    print ("Content-Type: application/javascript");

    #print $IN->header;

    my $url = $IN->param('url');

    $url =~ s|https://cdn.xxx.net|/srv/www/xxx.net/www|g;

    if (-e $url) {

        my $file = read_file($url);

        use JSON;

        my $mime_type;
        if ($url =~ /\.jpe?g$/i) { …

我正在使用 html2canvers 库来创建发票并下载为 PDF（A4 大小的 PDF）。下载的文件大小总是很大 (7MB - 13MB)。有没有办法减小文件大小并保持 PDF 的质量。

 public downloadPDF(order_id: string): void {            
        html2canvas(this.invoicepdf.nativeElement).then(function (canvas) {
            var wid: number
            var hgt: number
            var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height);
            var hratio = hgt / wid
            var height = 210 * hratio
            var pdf = new jsPDF("p", "mm", "a4");
            var imgData = canvas.toDataURL('image/png', 1.0);
            pdf.addImage(imgData, 'PNG', 0, 0, 210, height);
            pdf.save(order_id + '_Invoice.pdf');           
        });            
    }

这看起来应该是一件简单的事情，但它非常困难。

我只是有一个 div DOM 元素，里面有一些文本。

我正在调用 html2canvas 方法，它正在查找。

唯一的问题，画布有白色背景！

我试过：

• 将选项对象上的背景属性设置为 null
• 在画布和生成它的 DOM 元素上显式地将 CSS 背景属性更改为透明

不幸的是，似乎没有任何效果。

希望有一个优雅的解决方案，但快速破解是可以的。

嘿，所以我创建了这个网站：http://dst.dstealth.com来帮助使用 html2canvas 从 HTML div 元素自动生成 png 图像。我的 html2canvas 是用静态宽度 n 高度初始化的。

现在，当我在 Chrome 等桌面浏览器上使用该网站时，它会生成并保存尺寸为 876 x 434 像素的图像，这是我想要的输出。

但是当我在 Android chrome 浏览器上执行完全相同的操作时，它会生成超过 2000 x 2000 像素的图像。

我认为设置视口元会有所帮助，但这反而使我的桌面浏览器开始以稍大的分辨率保存图像，因此我现在已在代码中对此进行了注释。

谁能帮助我了解这里发生的情况以及如何确保生成的图像始终为 876 x 434？

我在带有其他信息的引导卡中显示 chartjs 图表，并使用 html2canvas 将卡导出为图像。导出的图像有一个奇怪的绿色覆盖，如图所示。

有什么我错过了吗？

html2canvas(document.getElementById(image), {
  logging: false,
  allowTaint: false,
}).then(function (canvas) {
  var uri = canvas.toDataURL();
  var link = document.createElement('a');

  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
});

我在nextjs中使用html2canvas。由于nextjs 进行服务器端渲染，因此很难在nextjs中使用html2canvas。
我使用nextjs提供的动态库来导入html2canvas，现在不知道html2canvas的文档中写的导入后如何使用html2canvas功能。

导入html2canvas

const html2canvas = dynamic(() => import('html2canvas'),{ssr:false})

当我按照文档中所写的步骤运行时，错误的输出说

“html2canvas 不是一个函数”

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

我想知道如何使用它。