【问题标题】:Save HTML table as an image将 HTML 表格另存为图像
【发布时间】:2012-03-24 08:50:03
【问题描述】:

我正在建立一个网站,该网站从表单中获取数据(人名)并将其发布到下一页表格中的自定义“注释”中。我希望用户能够将他们的“笔记”保存为带有自定义名称的图像。有没有办法将特定的 HTML 表格保存为 PNG?可以截取网页上特定坐标的截图吗?

如果没有,有没有办法在 HTML 画布中呈现表单中发布的 PHP 内容?

任何帮助都会很棒。我现在有点过头了。

【问题讨论】:

标签: php html image html-table screenshot


【解决方案1】:

虽然您可以使用多种工具呈现 HTML,但您不能确定这些工具会以与浏览器呈现 HTML 的方式相同的方式呈现 HTML。

如果您的最终目标是生成带有文本的图像,那么让我们解决这个问题,而不是尝试使您建议的解决方案有效。

看看 PHP 的 imagettftext() 函数。它包含一个示例#1,它从文本中创建一个小而简单的图像,可以存储在任何变量中......包括表单变量。

通过使用这个例子,并添加一些其他PHP's GD functions,您可以制作一个不错的表格副本,并确保它看起来完全符合您的要求,而不是 html2ps 或其他一些工具呈现的方式它。

<?php
// Set the content-type
header('Content-Type: image/png');

// Create the image
$im = imagecreatetruecolor(400, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
$text = isset($_POST['name']) ? $_POST['name'] : "name";
// Replace path by your own font path
$font = 'arial.ttf';

// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>

以下是上述脚本生成的示例输出:

请注意,您需要按照上面链接中的说明提供 arial.ttf

如果问题不正常,请先在屏幕上和网络服务器的错误日志中查找错误,然后再在此处进行跟进。您的 Web 服务器上可能没有安装 PHP 的 GD 模块。如果是这种情况,您应该咨询您的服务器管理员,以确保您可以使用所需的内容。

【讨论】:

  • 我认为在服务器端执行此任务对于此任务来说太过分了,这可以通过@Anber 建议的库以更简单的方式完成。这里的例子jsfiddle.net/arthurcamara/6phhb5g9
  • @ArthurCamara - 我同意做这个客户端可以提供更清洁的解决方案,但 OP 的问题是关于如何在 PHP 中生成 PNG。
  • 我认为他的问题是关于使用表格生成 PNG。和“如果没有,有没有办法呈现发布的 PHP”。所以 PHP 是第二个选择,因为它应该是 :)
【解决方案2】:

您可以在客户端尝试this JS library

【讨论】:

  • 对我来说,这也是一个更清洁的解决方案。带有建议库 (html2canvas) 的 JSFiddle 示例:jsfiddle.net/arthurcamara/6phhb5g9
  • 这是一个有用的库。如果此链接的答案为provided context 并解决了问题中所述的要求,那也很棒:“我希望用户能够将他们的“笔记”保存为带有自定义名称的图像它。"
  • 同意@ghoti :) 更多上下文和更深入的答案会很棒。使用画布也可以在图像上添加带有自定义名称的注释,因此为此提出客户端解决方案应该没有问题。
【解决方案3】:

可行的解决方案

  • 使用 fpdf 从 html(表格)创建 pdf
  • 使用 imagemagick 将 pdf 转换为 png

【讨论】:

    【解决方案4】:

    您也可以使用Xvfb。这是一个linux软件包。它代表“X-window Virtual Frame Buffer”(如果你想知道为什么它有这么深奥的名字)。

    这将做的是加载页面、执行任何 JavaScript 并应用来自 CSS 的不同样式,所有这些都在服务器的帧缓冲区中。然后就可以保存图片了。

    Xvfb 可能无法在大多数共享托管服务上使用,但是,如果这无关紧要,那么它将是一个可行的解决方案。

    【讨论】:

      【解决方案5】:

      你可以使用html2ps之类的东西

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-12-26
        • 2016-07-18
        • 1970-01-01
        • 2018-01-06
        • 1970-01-01
        • 2011-05-16
        • 2021-09-21
        相关资源
        最近更新 更多