gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-03 05:50:34 27 4
gpt4 key购买 nike

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

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com