<?php session_start(); include "confiq.php";
 	$koneksi=koneksi_tabungan($_SESSION['npsn']);
 		$qry_cari=mysqli_query($koneksi,"SELECT * FROM `tb_anggota` WHERE idanggota='".$_GET['id']."' ");
$row=mysqli_fetch_array($qry_cari);
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

</head>
<body>
    
    
<div>

 <a id="btn-Convert-Html2Image" href="#"><button>DOWNLOAD</button></a>

    <input id="btn-Preview-Image" type="button" value="Preview"/>  
    
    <div id="previewImage"></div>
</div>
<div id="html-content-holder" style="width:1000px; height:1588px; background-image: url('https://cashless.sdibanjarmasin.id/koperasi/SDNBJM_1.png');" >
<div  align="center" >
		<img style="border-radius: 2px; border: 4px solid #FFF; margin-top:350px; width:400px;" src="<?php echo $row['img'];?>"   />
		
		</div>
		
		<div align="center" style="margin-top:20px; font-size:36px; color:#FFF;"><b><?php echo $row['nama'];?></b>
	<div  style="margin-top:20px; width:400px; height:10px; background-color:#FFF;"></div></div>
	<div align="center" style="margin-top:30px; font-size:36px; color:#FFF;">	<div><b><?php echo $_SESSION['sekolah'];?></b><div>
		    	<div align="center" style="margin-top:10px; font-size:30px; color:#FFF;"><?php echo $row['nik'];?>@sdibanjarmasin.id<div>

	
		
		
<script>
window.addEventListener("load", () => {
  var qrc = new QRCode(document.getElementById("qrcode"), {
    text: "https://code-boxx.com/",
    width: 140,
    height: 140,
    colorDark: "#080B0C",
    colorLight: "#ffffff",
    // QRCode.CorrectLevel.L | QRCode.CorrectLevel.M | QRCode.CorrectLevel.H
    correctLevel : QRCode.CorrectLevel.H
  });
});
</script>
<script>
$(document).ready(function(){
document.getElementById("btn-Convert-Html2Image").style.display = "none";
document.getElementById("html-content-holder").style.display = "none";
	
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
 
    $("#btn-Preview-Image").on('click', function () {
	document.getElementById("html-content-holder").style.display = "block";
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
				document.getElementById("btn-Convert-Html2Image").style.display = "block";
				document.getElementById("html-content-holder").style.display = "none";
				document.getElementById("btn-Preview-Image").style.display = "none";
             }
         });
    });

	$("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "<?php echo $row['nama'];?>.png").attr("href", newData);
	});

});

</script>
</body>
</html>
                        