javascript - 如何将 html 表格保存为图像供客户保存在他们的计算机上

标签 javascript php save screenshot

我有一个网站,它根据用户粘贴到文本区域的某些行生成一个表(使用 php 回显一个表)。我希望我的客户能够将这张表保存在他们的机器上。这是我到目前为止发现的http://html2canvas.hertzen.com/但不知道如何使用它。此外,在未来的某个时候,我希望它有一个“在 facebook 上分享”按钮,以便将图像上传到他们的 facebook 帐户。

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

最佳答案

您可以为此使用 Canvas 。只需将所有数据放在 Canvas 中,您就会得到图像形式的输出。一个更好的例子可以是 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>

关于javascript - 如何将 html 表格保存为图像供客户保存在他们的计算机上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13189500/

相关文章:

javascript - 想要扩展原型(prototype)方法

javascript - 元素特定区域的背景颜色

javascript - 在哪里可以找到 MongoDB 触发的事件列表?

php - wkhtmltopdf - 编码问题

php - 正确编写查询 php pdo

swift - PNG 图像未保存到文档目录

Android 在自定义文件夹中保存相机图像

javascript 无效函数

php - 来自sql表的图像不遵循css

c - 写入/读取二进制保存游戏