WordPress Stage Download Image Screenshot Shortcode

<?php

function do_stage($attr){
 
 $tmphtml = '';
 // $tmphtml .= $attr["id"];
 
 $tmphtml .= '<!-- html2canvas.js Library -->
<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>';
 
 $background_image = get_field("background_image");
 $background_image_html = "";
 if ($background_image) {
 $background_image_html = '<div class="bg-wrapper"><img src="' . get_site_url() . "/wp-admin/admin-ajax.php?action=ajax_get_remote_image&q=" . $background_image["url"] . '" /></div>';
 }
 
 $text_group_1 = '$text_group_1';
 $text_group_1_title = '$text_group_1_title';
 $text_group_1_content = '$text_group_1_content';
 
 $text_group_1_html = "";
 if ($text_group_1) {
 $text_group_1_html = '<div class="text-group-1"><h3>' . $text_group_1_title . '</h3><span class="span1">' . $text_group_1_content . '</span></div>';
 }
 
 $tmphtml .= '<style>
 .stage-wrapper {
 min-height: 600px;
 width: 100%;
 background: #fff;
 margin: 50px 0;
 }
 #stage {
 position: relative;
 }
 #stage.bg-wrapper img {
 width: 100%;
 position: absolute;
 z-index: 10;
 left: 0;
 top: 0;
 } 
 </style>';
 
 $custom_css = get_field("custom_css");
 $tmphtml .= '<style>
 ' . $custom_css . '
 
 /**#stage {
 width: 1000px;
 height: 400px;
 }
 .text-group-1 {
 position: absolute;
 color: #eee;
 left: 200px;
 top: 20px;
 }
 **/
 </style>';
 
 $tmphtml .= '<div class="stage-wrapper">';
 $tmphtml .= '<div id="stage">';
 
 $tmphtml .= $background_image_html;
 $tmphtml .= $text_group_1_html;
 
 $tmphtml .= '</div>';
 $tmphtml .= '</div>';
 
 //$tmphtml .= '<div class="download-wrapper"><button id="download">Download</button></div>';
 
 $tmphtml .= '<script>jQuery(function(){
 
 jQuery(".stage-wrapper").append("<div class=\"download-wrapper\"><button id=\"download\">Download</button></div>");
 
 html2canvas(jQuery("#stage")[0]).then(function(canvas) {
 
 var preloading_item = document.createElement("a");
 preloading_item.setAttribute("download", "imagename.png");
 preloading_item.setAttribute("href", canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));

 jQuery("#download").click(function(){
 preloading_item.click();
 })
 
 })
 });
</script>';
 
 return $tmphtml;
 
}
add_shortcode( 'stage', 'do_stage' );