关于 HTML5canvas div 图片单独下载

Posted 2023-05-08

【中文标题】关于 HTML5canvas div 图片单独下载

【英文标题】：Regarding HTML5canvas div images to download individually

【发布时间】：2020-08-09 16:02:06

【问题描述】：

我需要帮助，我想为每个人下载 htmlf 5 画布，我动态调用图像数据，但无法下载画布请通过我的代码帮助我摆脱此类信息未来的用户可能会添加尽可能多的模板图像，它将使用与我动态调用数据相同的设计来调用，所以我不知道如何下载此类 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

 

【问题讨论】：

谁能给我更好的建议，因为我的情况有点不同并且卡住了

【参考方案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>**