Javascript 如何以PDF JQuery格式下载png画布图像

我以前写过很多次这段代码，是为了下载一个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');
            }
        });

您可以使用

jsPDF

调整代码：

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

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

CSS

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

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

这是屏幕截图的一些内容
Lorem ipsum dolor sit amet，奉献精英。这是一个特殊的国家，是一个真正的国家，是一个发明者，是一个临时官员。Laborum，harum，别名

以PDF格式下载

注意：我只在Windows 10上的Chrome、Edge和Firefox中测试了这一点。您可能想尝试其他浏览器/系统

您可以使用html2canvas代替。根据我的经验，图像质量和utf8支持比html2canvas好得多

使用jsPDF将图像转换为PDF的代码如下：

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

---

@暹罗我要求帮助如何做我的代码，所以请帮助我，如果你可以。。。