Sindbad~EG File Manager

{% extends 'digital_batch/empty_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Dashboard{% endblock %} 
{% block style %}
<style type="text/css">
		#content
			{
				/*background-image: url('BANQUET.jpg');*/
				background-size: contain;
				width: 1109px;
    			height: 1517px;
                /*width: 320px;
                height: 438px; */
    			margin:0px auto;
    		    position: relative;
			}
			
			#name {
                /*position: absolute;
                top: 279px;
                font-size: 28px;
                text-transform: uppercase;
                left: 50%;
                transform: translate(-50%, 0);
                font-family: sans-serif;
                font-weight: bold;
                width: 100%;
                text-align: center;
                padding: 10px;*/

                position: absolute;
                top: 1000px;
                font-size: 80px;
                text-transform: uppercase;
                left: 50%;
                transform: translate(-50%, 0);
                font-family: sans-serif;
                font-weight: bold;
                width: 90%;
                text-align: center;
                /*padding: 10px;*/

			}

            #img
            {
                width: 320px;
                height: 438px; 
            }



            #loading-bg {
                  position: fixed;
                  display: block;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  left: 0;
                  text-align: center;
                  /*opacity: 0.7;*/
                  background-color: #fff;
                  /*background-color:blue;*/
                  z-index: 99;
                }
            #loading-text {    
              z-index: 100;
              position: inherit;
              
            }
                #loading-image {
                  position: absolute;
                  top: 100px;
                  left: 240px;
                  z-index: 100;
                }
			
</style>
{% endblock %} 
{% block content %}   

<div class="row" id="loading">
<div class="col-12" >
    <h3 id="loading-text" class="my-5 ml-2 text-danger text-center">Generating badge.<br/> Please wait...</h3>
    <div id="loading-bg">
    </div>
</div>
</div>



<div class="container">
     <!--https://delegateapp.s3.ap-southeast-1.amazonaws.com/karavali22/BANQUET.jpg-->
      {% set img_url = "/static/images/BOA2023-Badge-v1.png" %}
    
      <div class="row">
            <div class="col-12">
                <!--<h2>Badge</h2>-->
                <div id="content" style="
                background-image: url('{{img_url}}');
                /*width: 320px;
                height: 438px;*/
    			margin:0px auto;">
                    
                    <div id="name">
                        {{ delegate.full_name }}
                    </div>
                    
                    <div id="role">
                    </div>
                    
                </div>
                 <div class="col-12 text-center my-5">    
               <img id="img" src="" width="100%" height="auto">
           </div>
            <div class="col-12 text-center">       
               <!--<button id="cmd" class="btn btn-primary">Download Badge</button>-->
            </div>
            </div>
        </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>



<script type="text/javascript">
	$(document).ready(function(){    

		// downloadpdf();
        display_img()

		$("#cmd").click(function function_name() {
			// downloadpdf();
			downloadpdf_img()
		})


     	
	});

	function downloadpdf_img() {

		var img = new Image();
		img.src = $('#img').attr("src");
		width = $('#img').width()
		height  = $('#img').height()
		var pdf =  new jsPDF({
				        orientation: '', // portrait
				        unit: 'pt', // points, pixels won't work properly
				        format: [width, height] // set needed dimensions for any element
				  });

		pdf.addImage(img, 'JPEG', 0, 0, width, height,undefined,'FAST');
		pdf.save('{{ delegate.delegate_no }}.pdf');
	}


    function display_img() {
        // t_width = $('#content').width()
        // t_height  = $('#content').height()
        html2canvas(document.querySelector("#content")).then(canvas => {
            var imgData = canvas.toDataURL('image/jpg');
            $("#img").attr("src",imgData);
             $("#content").remove();               
             $("#loading").remove();
        });
    }

	function downloadpdf() {
		html2canvas(document.querySelector("#content")).then(canvas => {
        
           saveAs(canvas.toDataURL(), '{{ delegate.delegate_no }}.png'); // save as image  
        	 // var imgData = canvas.toDataURL();   
        	 //https://www.npmjs.com/package/jspdf           
       //          var doc = new jsPDF({
							//   orientation: "portrait",
							//   unit: "mm",
							//   format: [210, 297]
							// });

				 // var imgData = canvas.toDataURL('image/png');              
                // var doc = new jsPDF('p', 'mm',[297, 210]);			
    //             var width = $('#content').width();
				// var height = $('#content').height();
                // doc.addImage(imgData, 'PNG', 0, 0);
                // doc.save('sample-file.pdf');

    //             var imgData = canvas.toDataURL('image/jpg');
				// var pdf =  new jsPDF({
				//         orientation: '', // portrait
				//         unit: 'pt', // points, pixels won't work properly
				//         format: [canvas.width, canvas.height] // set needed dimensions for any element
				//   });

				// // pdf.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height);
				// // pdf.save('your-filename.pdf');

				// pdf.internal.scaleFactor = 30;
				// var img = new Image();
		  //      img.src = imgData;
		  //      img.onload = function() {
		  //          pdf.addImage(img, 'PNG', 0, 0, canvas.width, canvas.height);
		  //          pdf.save('filename.pdf');
		  //       };
     	});
	}

// function saveAs(uri, filename) {
         
//              var link = document.createElement('a');
         
//              if (typeof link.download === 'string') {
         
//                  link.href = uri;
//                  link.download = filename;
         
//                  //Firefox requires the link to be in the body
//                  document.body.appendChild(link);
         
//                  //simulate click
//                  link.click();
         
//                  //remove the link when done
//                  document.body.removeChild(link);
         
//              } else {
         
//                  window.open(uri);
         
//              }
//           }
      </script>

{% endblock %}