Every i have to create a Image from Photoshop and set all value what clients website earn then i sent to client.
I want any macanisum like at one click download same Html Page as Image and share to my Clients.
How to convert Html to Image (JPG/JPEG/PNG) any Image format by Jquery or Php?
- 5 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Download</title>
</head>
<body>
<div class="container" id="html-content-holder" style="background:#fff">
<p>Testing Paragraph</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 mt-1 text-center"> <a id="btn-Preview-Image" href="#">Download</a> <a id="btn-Convert-Html2Image" href="#">Download</a> </div>
<div class="col-lg-12">
<div id="previewImage"> </div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<script>
$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/jpeg");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "image.jpeg").attr("href", newData);
});
});
</script>
</body>
</html>
Hot Questions