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.
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
 |
| Top 10 Languages in 2015 |
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...
No comments :
Post a Comment