convert div to image in wordpress

<?php

	
add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
  echo '<style>
   table.form-table.meta_box {
   direction:ltr !important;
    } 
	
	
	
	#certificate-builder {
    position: relative;
    display: block;
    min-width: 100%;
    min-height: 800px;
	direction: ltr;
}

	
  </style>';
}

	add_action('wp_footer', 'greenbackend_custom_code');
	
add_filter('the_content','add_signature', 1);

function add_signature($text) {

 global $post;

 if(($post->post_type == 'certificate'))

    $text .= '<div class="signature"><a id="btnExport" href="#"><img  src="https://cdn.printfriendly.com/buttons/printfriendly-pdf-button.png" /></a></div>';

    return $text;

}

function greenbackend_custom_code() {
	


		if ( get_post_type( get_the_ID() ) == 'certificate' ) {
		?>
		
<script src="https://unpkg.com/html2canvas@1.0.0-rc.5/dist/html2canvas.js"></script>
<script>

$("#btnExport").on('click', function () {
$('#certificate').prepend("<h1 class='noprint'>جاري المعالجة....</h1>");
var element = $(".certificate");
     window["html2canvas"](element, {
           onrendered: (canvas) => {
            dataSrc = canvas.toDataURL("image/png");
          
            
		$('#certificate').prepend("<h1>جاري المعالجة....</h1>");
		//	dataSrc = dataSrc.replace("data:image/png;base64,","");

			  	$('#certificate').html('<img src="'+dataSrc+'" alt="">');
			$('#certificate').prepend("<h1 class='noprint'>يمكنك تحميل الشهادة من <a href='"+dataSrc+"' alt=''>هنا</a> | <a href='window.print()'  onclick='window.print()' alt=''>طباعة</a></h1>");
                        }
                    });
    });

</script>
		<style>
		
		@media print{
   .noprint{
       display:none;
   }
}

	@media print {
 @page {
  size: A4 landscape;
}

h1#pf-title {
    display: none;
}
#pf-body #pf-src,div#scrolltop {
 display: none;
}

}
	
@page {
  size: A4 landscape;
}

header.fix {
    display: none;
}
section#title {
    display: none;
}
footer {
    display: none;
}
		
		</style>
		<?php
    //if is true
}	 
 
 }

In case you want to enable download, you could use the following

<?php
$imagedata = base64_decode($_POST['imgdata']);
$filename = md5(uniqid(rand(), true));
//path where you want to upload image
$file = $_SERVER['DOCUMENT_ROOT'] . '/certs/'.$filename.'.png';
$imageurl  = 'https://www.example.org/certs/'.$filename.'.png';
file_put_contents($file,$imagedata);
echo $imageurl;

<script>

$("#btnExport").on('click', function () {
$('#certificate').prepend("<h1>جاري المعالجة....</h1>");
var element = $(".certificate");
     window["html2canvas"](element, {
           onrendered: (canvas) => {
            dataSrc = canvas.toDataURL("image/png");
          
            
		$('#certificate').prepend("<h1>جاري المعالجة....</h1>");
		//	dataSrc = dataSrc.replace("data:image/png;base64,","");
	
			  	$('#certificate').html('<img src="'+dataSrc+'" alt="">');
			  
			  	var imgdata = dataSrc.replace(/^data:image\/(png|jpg);base64,/, "");
		//ajax call to save image inside folder
		$.ajax({
			url: 'https://www.example.org/save_image.php',
			data: {
			       imgdata:imgdata
				   },
			type: 'post',
			success: function (response) {   
               console.log(response);
	$('#certificate').prepend("<h1 class='noprint'>يمكنك تحميل الشهادة من <a href='"+response+"' alt=''>هنا</a> | <a href='window.print()'  onclick='window.print()' alt=''>طباعة</a></h1>");
			   //$('#image_id img').attr('src', response);
			}
		});
			  
			  
                        }
                    });
    });

</script>
		<style>
		
	@media print {
 @page {
  size: A4 landscape;
}
.noprint{
display:none;
}
</style>