Question Detail

How to convert HTML page in Image Format from jquery?

5 years ago Views 1745 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">
<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>
<div class="container" id="html-content-holder" style="background:#fff">
  <p>Testing Paragraph</p>
 <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>
<script src=""></script> 
<script src=""></script>
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (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);