个人中心
gpt4 book ai didi

javascript - 如何将 HTML 页面下载为图像？

转载 作者：行者123 更新时间：2023-12-01 03:56:57 25 4
gpt4 key购买 nike

我可以下载 HTML 页面的内容，但页面包含 QR 代码图像，该图像在我下载的图像中不可见，而不是出现空白

我的 HTML 和 jQuery 代码位于以下 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>

最佳答案

我发现你的 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>

关于javascript - 如何将 HTML 页面下载为图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42578116/

25 4 0
文章推荐： python - 记忆化实现之间的差异 - Python
文章推荐： statistics - 如何在 mahout 中解释 IRStatisticsImpl 数据
文章推荐： 即使验证返回 false，JQuery 表单也会被提交
文章推荐： python - 拆分列并写入单独的输出文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com