Regarding HTML5canvas div images to download individually - php

Question

I need help i want to download the htmlf 5 canvas for each individuall and im calling the image data dynamic but not been able to download the canvas plzz help me out from such informartion through my code in future user may add as many template images it will be called with same design as i have called data dynamically so im not getting what to do for download the canvas for such div images can anyone help me out
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;">×</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;"> 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>**