Question

我有一个网站，可以从用户粘贴到文本区域的某些行生成一个表（使用php回显表）。我希望我的客户能够将这张桌子保存在他们的机器上。这是我迄今为止发现的http://html2canvas.hertzen.com/，但不知道如何使用它。在未来的某个时候，我希望它有一个“在Facebook上分享”按钮，以便将图像上传到他们的Facebook帐户。

我已经在谷歌搜索了2天，但没有任何结果，我发现像php函数将图像保存到服务器而不是客户机。任何帮助都将受到高度赞赏。

Answer 1

使用PHP GD随时随地创建图片。

当调用php文件时，使用它将返回头类型Content-type: image/png。（注意：你不能在这个php中返回html和图像，因为我们将头类型定义为image / png）

或者，您可以生成支持表格的pdf文件。生成pdf的最佳库是FPDF 请参阅fpdf here

中的表格生成示例

链接：

PHP GD

FPDF

Answer 2

你可以使用画布。只需将所有数据放入画布中，您就可以将输出作为图像。一个更好的例子可以是found here

<html>
<body>
<style type="text/css">
table
{
border=5;
}
</style>
<p><canvas id="canvas" style="border:2px solid black;" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<table><tr><td>HI</td><td>Welcome</td></tr><tr><td>Hello</td><td>World</td></tr> </table>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>

如何将html表保存为客户端保存在计算机上的图像

2 个答案: