Question Detail

How to convert HTML page in Image Format from jquery?

5 years ago Views 1810 Visit Post Reply

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?


Thread Reply

Lokesh Gupta

- 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>