CODEWITHSUNDEEP
javascriptjqueryhtmldownload
Luqman
Luqman

Reputation: 163

How to download HTML page as an Image?

I am able to download content of HTML page but page contain image of QR code, which is not visible in my downloaded image instead of that I am getting blank space

My HTML and jQuery code is in the following fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="html-content-holder" align="center" style="background-color:lightcyan; color:black; width: 500px;
        padding-left: 25px; padding-top: 10px;">
  <div id="content">
    <form method="post" id="qrForm">

      <center>
        <h4 style="color:red">Generate QR Code using Google Chart API</h4>
        <br>
        <b>Type Website URL:</b>


        <!--Create TextBox Code-->
        <input type="text" id="QRCode" value="https://www.google.com" size="25">
        <br><br>

        <h3>Output QR Image:</h3> <img id='qrImage' style='display:inline;' src="Images/chart.png" />

        <img id="embedImage" />

        <img id="embedImage" />

        <!--<!--<!--   Create Button Code-->
        <center>
          <input type="button" value="Make QR Code" onclick="javascript: generateQRCode();">
        </center>

      </center>

      <center>
        <a id="btn-Convert-Html2Image" href="#">Download QR Png</a>
        <br />

        <!--Print Preview Img In this Div-->

        <h3>Preview :</h3>
        <div id="previewImage">
        </div>
      </center>
    </form>
  </div>
</div>
<script>
  //Generate QR Code Function

  function generateQRCode() {
    this.qrImage.style.display = 'none';


    //GoogleAPI + TextBox Value= Create QR Image.
    this.qrImage.src = "https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=" +
      encodeURIComponent(QRCode.value.trim());
    this.qrImage.style.display = 'inline';


    //Convert Html To Png
    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable

    html2canvas(element, {
      onrendered: function(canvas) {
        $("#QRCanvas").append(canvas);
        getCanvas = canvas;
      }
    });

    //jQuery: Download HTML to IMAGE
    $("#btn-Convert-Html2Image").on('click', function() {
      var imgageData = getCanvas.toDataURL("image/png");

      // Now browser starts downloading it instead of just showing it
      var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream" + "Image/chart.png");
      $("#btn-Convert-Html2Image").attr("download", "QRCodeImage.png").attr("href", newData);
      //<img class="preload_img" src="../../dbfhrael6egb5.cloudfront.net/wp-content/themes/qr/img-V2/modal/download_preloader.gif"/>
    });
  }
</script>

Upvotes: 1

Views: 6316

Answers (2)

safin chacko
safin chacko

Reputation: 1390

TRY THIS

  $('#btn-generateQR').click(function () { 
            html2canvas(document.getElementById('displayImg'), {
               onrendered: function(canvas) {
                   var data = canvas.toDataURL("image/png");
                   var docDefinition = {
                       content: [{
                               image: data,
                                width: 500,
                                height:400,
                           }],
                       pageMargins: [ 50, 20, 20, 10 ]
                   };

                   pdfMake.createPdf(docDefinition).download("budget.pdf");
               },                     
               logging: true,
               useCORS:true,           
           });
           });

Upvotes: 0

Alexandru Robert
Alexandru Robert

Reputation: 56

I found your html a bit complicated so I changed it to fit with my style. I did not use html2canvas, I was doing some annoying stuff for some reason, so I used another library that does the same thing.

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Download QR</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.5.2/dom-to-image.min.js"></script>
    </head>

    <body>
        <div style="background-color:lightgrey; padding: 25px;">
            <h3>Generate QR Code using Google Chart API</h3>
            <form>
                <label for="QRCode">Type url:</label>
                <input type="text" id="QRCode" value="https://www.google.com">
                <button type="button" id="btn-generateQR">Generate QR</button>
            </form>
            <div id="displayImg"> </div>
            <button id="btn-downloadQR" style="display:none;">Download QR</button>
        </div>
        <script>
            $(document).ready(function () {

                $('#btn-generateQR').click(function () {
                    let inputValue = $('#QRCode').val().trim()
                    $('#displayImg').html(
                        `
                        <h4>Output QR Image:</h4>
                        <img id="linkQR" src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=${inputValue}"/>
                        `
                    )
                    $('#btn-downloadQR').show()
                })

                $('#btn-downloadQR').click(function () {
                    domtoimage
                        .toJpeg(document.getElementById('linkQR'), {
                            quality: 0.95
                        })
                        .then(function (dataUrl) {
                            let link = document.createElement('a')
                            link.download = 'imageQR.jpeg'
                            link.href = dataUrl
                            link.click()
                        })
                })

            })

        </script>
    </body>

</html>

Upvotes: 3

Related Questions