Phi*_*pCy 5 javascript php screenshot save
我有一个网站,从用户粘贴到文本区域的某些行生成一个表(使用php回显表).我希望我的客户能够将这张桌子保存在他们的机器上.这是我到目前为止找到的http://html2canvas.hertzen.com/但不知道如何使用它.在未来的某个时候,我希望它有一个"在Facebook上分享"按钮,以便将图像上传到他们的Facebook帐户.
我已经搜索谷歌2天了,没有任何结果,我发现像php功能将图像保存到服务器而不是客户机.任何帮助将受到高度赞赏.
你可以使用画布。只需将所有数据放入画布中,您就会得到图像形式的输出。可以在这里找到更好的示例
<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>
Run Code Online (Sandbox Code Playgroud)