PNGキャンバスイメージをPDFとしてダウンロードする方法JQuery

Question

私はこのコードを何度も書いて、イメージをpngとしてダウンロードしています。今私は画像がpdf形式でダウンロードされ、私のコードの構造をあまり変更せずにこの実装を行う方法がわからないことが必要です。誰も私にこの恩恵をすることができますか？どうもありがとうございました。

私はJQuery：実装するコードの

function genScreenshot() { 
       html2canvas(document.getElementById('boxes'), { 
        onrendered: function(canvas) { 
         $('#container').html(""); 
         $('#container').append(canvas); 

         if (navigator.userAgent.indexOf("MSIE ") > 0 || 
          navigator.userAgent.match(/Trident.*rv\:11\./)) 
         { 
          var blob = canvas.msToBlob(); 
          window.navigator.msSaveBlob(blob,'yuppy.png'); 
         } 
         else { 
          $('#test').attr('href', canvas.toDataURL("image/png")); 
          $('#test').attr('download','yuppy.png'); 
          $('#test')[0].click(); 
         } 
        } 
       }); 
      } 

例：

html2canvas($("#canvas"), { 
      onrendered: function(canvas) {   
       var imgData = canvas.toDataURL(
        'image/png');    
       var doc = new jsPDF('p', 'mm'); 
       doc.addImage(imgData, 'PNG', 10, 10); 
       doc.save('sample-file.pdf'); 
      } 
     }); 

Answer 1

あなたはjsPDFを使用して、あなたのコードにthis answerを適応させることができます。

JS

$('#test').click(genScreenshot); 

function genScreenshot() { 
    html2canvas(document.getElementById('boxes'), { 
     onrendered: function(canvas) { 
      $('#container').html(""); 
      $('#container').append(canvas); 

      var imgData = canvas.toDataURL("image/jpeg", 1.0); 
      var pdf = new jsPDF(); 

      pdf.addImage(imgData, 'JPEG', 0, 0); 

      pdf.save('screenshot.pdf'); 
     } 
    }); 
} 

CSS

#boxes { 
    background: #fff; /* To avoid a black background in PDF */ 
} 

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> 

<div id="boxes"> 
    <h1>This is some content for the screenshot</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae asperiores est autem corporis natus nesciunt veritatis, ullam inventore distinctio, quisquam nam quis temporibus vero, fugiat tempore officia. Laborum, harum, alias.</p> 
</div> 

<button id="test">Download as PDF</button> 

<div id="container"></div> 

注：私はあなたが他のブラウザをしようとする場合がありますのWindows 10上にクロム、エッジとFirefoxでこれをテストしました/システム。

Answer 2

html2canvasの代わりにdom-to-imageを使用できます。私の経験から、画像の品質とutf8のサポートはhtml2canvasよりはるかに優れています。

その後、PDFに画像を変換するjsPDFを使用してコードのようなものになります：

domtoimage.toPng(
    document.querySelector("canvasElement"), 
    { width: 800, height: 1000, quality: 1} 
    ) 
    .then(function(dataUrl) { 
     var doc = new jsPDF(); 
     var img = new Image(); 
     img.src = dataUrl; 
     img.onload = function() { 
      doc.addImage(img, 'PNG', 10, 15); 
      doc.save('filename.pdf'); 
     }; 
    }) 
    .catch(function (error) { 
      console.error('oops, something went wrong!', error); 
    });