我有一个网站,它根据用户粘贴到文本区域的某些行生成一个表(使用 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/