Question

我可以下载HTML页面的内容但是页面包含QR码的图像，这在我下载的图像中是不可见的，而不是我得到的空白

我的HTML和jQuery代码位于以下小提琴

中

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

Answer 1

我发现你的HTML有点复杂，所以我改变它以适应我的风格。我没有使用html2canvas，因为某些原因我做了一些讨厌的东西，所以我使用了另一个做同样事情的库。

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

Answer 2

尝试

  $('#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,           
           });
           });

如何下载HTML页面作为图像？

2 个答案: