Menu
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.com/ 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.
310
you 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.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
