I have a website which generates a table (using php echoes out a table) from some lines a user pastes into a text area. I would like my clients be able to save this table on their machine. This is what I have found so far / but don't know how to use it. Also sometime in the future I would like it to have a "share on facebook" button so that the image is uploaded to their facebook account.
I have searched Google for 2 days now without any result all ones I could find like php function saved the image to the server instead of the clients machine. Any help would be highly appreciated.
I have a website which generates a table (using php echoes out a table) from some lines a user pastes into a text area. I would like my clients be able to save this table on their machine. This is what I have found so far http://html2canvas.hertzen./ but don't know how to use it. Also sometime in the future I would like it to have a "share on facebook" button so that the image is uploaded to their facebook account.
I have searched Google for 2 days now without any result all ones I could find like php function saved the image to the server instead of the clients machine. Any help would be highly appreciated.
Share Improve this question edited Jul 14, 2017 at 11:40 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Nov 2, 2012 at 4:52 PhilipCyPhilipCy 531 gold badge1 silver badge4 bronze badges 2- Does it have to be an image? Would generating a PDF on the fly suffice? – dana Commented Nov 2, 2012 at 4:56
- has to be image to be posted on facebook later on – PhilipCy Commented Nov 2, 2012 at 4:59
2 Answers
Reset to default 2you can use canvas for that. Simply put all you data in canvas and you will get the output as image. A better example can be 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/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3/1999/xhtml' style='font-size:40px'>" +
"<table><tr><td>HI</td><td>Wele</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>
Use PHP GD to create images on the go.
Using this will return a header type Content-type: image/png when the php file is called. (Note: You cannot return html along with the image in this php, since we define the header type to image/png)
Alternatively you can generate pdf files which support tables. A best library to generate pdf's is FPDF
See the table generation example in fpdf here
Links:
PHP GD
FPDF