I need help I want to download 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. 通过我的代码，在未来的用户可能会添加许多模板图像，它将被调用与相同的设计，因为我有动态调用数据，所以我不明白该怎么做下载画布为这样的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
}
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>**