Относительно HTML5canvas Div изображения для загрузки по отдельности

Question

Мне нужна помощь. Я хочу загрузить холст htmlf 5 для каждого отдельного пользователя, и я вызываю данные данных динамически c, но не смог загрузить холст, plzz выручите меня из такой информации через мой В будущем пользователь может добавить столько шаблонных изображений, сколько он будет вызывать с таким же дизайном, как я назвал данные динамически, поэтому я не понимаю, что делать для загрузки холста для таких изображений Div, кто-нибудь может мне помочь

if ($sImage)
{
    $gallery = get_field('field_5ea2b74754193');
?>  


    <div class="row">
        <?php   
        $counter=1;
        $canvas=1;
        foreach ($gallery as $value) { ?>
        <div class="col-sm-4">
            <div class="onethird">
                <center> 
                    <h2>Design-<?php echo $counter++;?></h2><br>
                    <div class="my_banner" id="myCanvas <?php echo $canvas; ?>">
                        <div class="template_bg" style="background-image: url(<?php echo $sImage?>);">
                            <!--php echo '<img src="'.$sImage.'" class="absolute img-fluid" />'; ?-->                       
                            <img src="<?php echo $value['full_image_url'];?>" class="relative img-fluid" />
                        </div>
                    </div>  

                    <div>
                        <br>    
                        <a id="download" href="#" class="dowload btn btn-danger">Download</a> 
                    </div>
                </center> 
            </div>  
        </div>  
      <?php $canvas++; } ?>
      <script> 
                            $(document).ready(function() {  
                            var canvas_id=0;    
                                $('a.dowload').click(function(e){
                                    e.preventDefault();
                                   alert('Download on process');
                                        html2canvas($('#myCanvas'),{
                                            onrendered: function (canvas) {
                                            var a = document.createElement('a');
                                                a.href = canvas.toDataURL("image/png");
                                                alert(a.href);       
                                                a.download = 'my-image.png';
                                                a.click();
                                            }
                                         });
                                    }); 
                               }); 
                        </script> 
    </div>  
</div>

<?php

 }

Answer 1

  I have used a modal box for my issue to get the work to be done in proper work for converting Div images to html2canvas to create one image and download the image side by side 
if ($sImage)
        {
            $gallery = get_field('field_5ea2b74754193');
        ?>  
            <div class="row">
                <?php   
                $counter=1;
                foreach ($gallery as $key=> $value) {?>
                <div class="col-sm-4">
                    <div class="onethird">
                        <center> 
                            <h2>Design-<?php echo $counter++;?></h2><br>
                            <div class="my_banner" id="myCanvas_<?php echo $value['id']; ?>">
                                <div class="template_bg" style="background-image: url(<?php echo $sImage?>);">
                                    <img src="<?php echo $value['full_image_url'];?>" class="relative img-fluid" />
                                </div>
                            </div>  

                            <div>
                                <br>
                                <!-- Preview -->                            
                                <div  class="qrcimg mt-3" data-toggle="modal" data-target="#myModal">
                                    <input id="preview_box" type="button" data-id="<?php echo $value['id'];?>"  name="canvas_id" value="Get Image" class="preview_box btn btn-outline-primary"/>

                                </div>
                                <div class="modal fade" id="myModal" role="dialog">
                                      <div class="modal-dialog">
                                         <!-- Modal content-->
                                         <div class="modal-content">
                                            <div class="modal-header">
                                               <h4 class="modal-title text-center" style="color:black; font-weight:bold;">SlashDP</h4>
                                               <button type="button" class="close" data-dismiss="modal" style="font-size:2rem;">&times;</button>    
                                             </div>
                                            <div class="modal-body">
                                             <div id="canvas_image" data-id="<?php echo $value['id'];?>"></div>
                                             <center><a id="download" href="#"  class="clear btn btn-danger"><i class="fa fa-download" style="font-size:1rem;">&nbsp;Download</i></a></center>
                                            </div>
                                         </div>
                                      </div>
                                   </div> 

                            </div>
                        </center> 
                    </div>  
                </div>  
               <?php  } ?>
               <!-- Canvas image get preview and download code -->
                     <script> 

                                $(document).ready(function() { 
                                        // Global variable
                                        var getCanvas;
                                        $(".preview_box").on('click', function() {
                                        var dataId = $(this).attr("data-id");
                                        var canvas_img = $("#myCanvas_"+dataId).get(0); 
                                            html2canvas(canvas_img,{ 
                                                useCORS: true,
                                                allowTaint: false,
                                                letterRendering: true,
                                                logging:true,
                                                onrendered: function(canvas) {

                                                    $("#canvas_image").append(canvas); 
                                                      getCanvas = canvas;
                                                       console.log(canvas);

                                                } 
                                            }); 
                                        }); 
                                        $("#download").on('click', function() { 

                                            var imageData =getCanvas.toDataURL("image/png");
                                            // Now browser starts downloading 
                                            // it instead of just showing it 
                                            var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream"); 


                                            $("#download").attr("download", "my-demo.png").attr("href", newData);

                                        }); 
                                         jQuery(".clear").click(function(){ jQuery("#canvas_image").empty();});
                                         jQuery(".close").click(function(){ jQuery("#canvas_image").empty();});
                                    });                      
                    </script> 

            </div>  
        </div>**