HTMLページをイメージとしてダウンロードする方法は？私は、HTMLページが、ページのコンテンツをダウンロードすることができています

は、私は空白を取得していますというのではなく、私のダウンロードした画像に表示されないQRコードの画像が含まれているHTMLページをイメージとしてダウンロードする方法は？私は、HTMLページが、ページのコンテンツをダウンロードすることができています

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

出典

2017-03-03 Luqman

をお試しください私はあなたの質問にフィドルを追加しました。 https://jsfiddle.net/w6Ldut3h/ –

私はので、私は自分のスタイルに合うようにそれを変更し、あなたの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>

出典

2017-03-03 13:01:43

ダウンロード機能があなたのコードで動作していません – Luqman

これは私のブラウザにあります。 Chromeバージョン54.0.2840.99 m（64ビット）を使用する。 –

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,   
      }); 
      });

出典

2017-03-05 09:58:45

HTMLページをイメージとしてダウンロードする方法は？私は、HTMLページが、ページのコンテンツをダウンロードすることができています

答えて

関連する問題