Javascript 如何将html表格另存为图像，以便客户端保存在其计算机上_Javascript_Php_Save_Screenshot

Javascript 如何将html表格另存为图像，以便客户端保存在其计算机上

javascript php

Javascript 如何将html表格另存为图像，以便客户端保存在其计算机上,javascript,php,save,screenshot,Javascript,Php,Save,Screenshot,我有一个网站，它从用户粘贴到文本区域的一些行中生成一个表（使用php回显一个表）。我希望我的客户能够在他们的机器上保存此表。这是我到目前为止发现的，但我不知道如何使用它。另外，在将来的某个时候，我希望它有一个“在facebook上分享”按钮，这样图像就会上传到他们的facebook帐户我已经在谷歌搜索了2天，没有任何结果。所有我能找到的结果，比如php函数，都将图像保存到服务器上，而不是客户端机器上。任何帮助都将不胜感激。使用PHP-GD在移动中创建图像当调用php文件时，使用此选项将返回头

我有一个网站，它从用户粘贴到文本区域的一些行中生成一个表（使用php回显一个表）。我希望我的客户能够在他们的机器上保存此表。这是我到目前为止发现的，但我不知道如何使用它。另外，在将来的某个时候，我希望它有一个“在facebook上分享”按钮，这样图像就会上传到他们的facebook帐户

我已经在谷歌搜索了2天，没有任何结果。所有我能找到的结果，比如php函数，都将图像保存到服务器上，而不是客户端机器上。任何帮助都将不胜感激。

使用

PHP-GD

在移动中创建图像

当调用php文件时，使用此选项将返回头类型

内容类型：image/png

。（注意：在此php中，您不能将html与图像一起返回，因为我们将标题类型定义为image/png）

或者，您可以生成支持表格的pdf文件。生成pdf的最佳库是

FPDF

请参见fpdf中的表格生成示例

链接：

您可以使用画布来实现这一点。只需将所有数据放在画布中，就可以得到图像输出。一个更好的例子是


桌子
{
边界=5；
}

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var data=“”+
"" +
"" +
“HIWelcomeHelloWorld”+
"" +
"" +
"";
var DOMURL=self.URL | | self.webkitURL | | self；
var img=新图像（）；
var svg=newblob（[data]，{type:“image/svg+xml；charset=utf-8”}）；
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
};
img.src=url；

它必须是图像吗？动态生成PDF文件就足够了吗？必须是以后在facebook上发布的图像，输出图像很简单。。。呈现HTML是一个棘手的部分，我恐怕你不能回答这个问题。它必须是一个图像文件，因为不能在facebook上发布PDF。另外，我也找不到任何可以在PHP GD中生成表的东西，感谢您的及时回答though@brad我同意你所说的。棘手的部分是为图像中的表编写代码。但通过GD是绝对可能的。例如，以facebook上的日历应用程序为例，他们抓取用户的图像并将其分层到基础图像上。同样地，@philip可能应该使用分层来获得结果，但它同样受到限制。@Saisidhar，当然你可以用GD创建任何光栅图形，但这不是他想要做的。他想要呈现HTML。单凭GD是做不到的。谢谢看起来正是我需要的。但我不知道如何将我的表放到画布中，当我在画布中添加一个标记并在那里输入您的表时，画布保持空白。然后在关闭画布标记之前关闭div标记等。。。只有一个空白矩形出现，我希望您查看，因为这可能会有帮助，如果您只是将HTML直接粘贴到canvas元素中，那么它会将其视为

<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>