将 HTML 表格另存为图像

Posted 2023-02-24

【中文标题】将 HTML 表格另存为图像

【英文标题】：Save HTML table as an image

【发布时间】：2012-03-24 08:50:03

【问题描述】：

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

如果没有，有没有办法在 HTML 画布中呈现表单中发布的 php 内容？

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

【问题讨论】：

看看php内置的图片函数：nz.php.net/manual/en/refs.utilspec.image.php

【参考方案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之类的东西