Monday, 22 June 2015

Table to Image Using HTML5 canvas and PHP

Vawna ka sawi tur hi a hmanna a tam khawp mai a. HTML5 canvas hmanga table image-a chantirna a ni. Mahse tam zawk chuan table hi database atanga siam kan duh tlangpui a. Chuvangin Database nena hman rem turin PHP array ka phuah chawp a. Ka data erawh hi chu a dik thlap a ni. Tichuan a hnuaia thlalak ang tak hi siam turin HTML5 chauh kan hmang ang a, a data lak nan chuan PHP kan hmang thung ang.
Top 10 Languages in 2015
A awlsam zawk nan index.php page-ah a hnuaia mi dahlut vek la. Server atangin run la, a chunga mi ang chiah hi i hmu ang:
Table to PNG siamdan mawlmang
<?php

$languages = array( array("Sl/No"=>1, "Programming Language"=>"Python",  "Job"=>"31.2%" , "Rank"=>1 ),

               array("Sl/No"=>2, "Programming Language"=>"Java", "Job"=>"19.6%" , "Rank"=>2),

               array("Sl/No"=>3, "Programming Language"=>"C++", "Job"=>"9.8%" , "Rank"=>3),

              array("Sl/No"=>4, "Programming Language"=>"Ruby", "Job"=>"7.1%" , "Rank"=>4),

              array("Sl/No"=>5, "Programming Language"=>"C#", "Job"=>"7.4%" , "Rank"=>5),

              array("Sl/No"=>6, "Programming Language"=>"C", "Job"=>"6.1%" , "Rank"=>6),

              array("Sl/No"=>7, "Programming Language"=>"Javascript", "Job"=>"6.5%" , "Rank"=>7),

              array("Sl/No"=>8, "Programming Language"=>"PHP", "Job"=>"3.6%" , "Rank"=>8),

              array("Sl/No"=>9, "Programming Language"=>"Go", "Job"=>"2.3%" , "Rank"=>9),

              array("Sl/No"=>10, "Programming Language"=>"Perl", "Job"=>"1.5%" , "Rank"=>10)

             ); 

?>
<!doctype html>
<head>
    <title>Table to PNG</title>
</head>

<body>

<p><canvas id="canvas" style="border:2px solid black;" width="430" 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='430' height='500'>" +

             "<foreignObject width='100%' height='100%'>" +

    "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:20px; padding-left:10px'>" +

    

    "<br /><?php if (count($languages) > 0): ?><table border='1' cellpadding='6' cellspacing='6' style='border-collapse:collapse; padding:10px 10px 10px 10px;'><caption>Top 10 Coding Languages 2015</caption><tr><th><?php echo implode('</th><th>', array_keys(current($langueges))); ?></th></tr><?php foreach ($languagesas $row): array_map('htmlentities', $row); ?><tr><td><?php echo implode('</td><td>', $row); ?></td></tr><?php endforeach; ?></table><?php endif; ?>" +

               

                "</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></p>

    </body>

</html>

</pre>
Demo chu nakinah aw...