Home/ Questions/Q 8786115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:32:04+00:00

I have a website which generates a table (using php echoes out a table)

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0