我似乎无法使用 jsPDF 将图像加载到 PDF 文件答案

【问题标题】：I can't seem to load an Image to a PDF file using jsPDF我似乎无法使用 jsPDF 将图像加载到 PDF 文件
【发布时间】：2017-09-25 04:25:28
【问题描述】：

我正在尝试从 HTML 文档生成 PDF 文档，在我的 javascript 代码中输入输入和预加载的图像，代码如下：

<html>
<head>
<title>
    Generar pdf
</title>
</head>
    <body>
        <input type = "text" id = "jjj">
        <button id="button" onclick="generar();"></button>



    <script src = "jsPDF-1.3.2/dist/jspdf.debug.js"></script>
    <script src = "pdf.js"></script>
    </body>
</html>

Javascript

var input = document.getElementById('jjj');
var pdf = new jsPDF();

function generar(){

    var texto = input.value;
    var imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-
100.jpg';
    pdf.addImage(imgData, 'JPG', 15, 40, 180, 160);
    pdf.text(30, 30, texto);
    pdf.save('my_pdf.pdf');
}

而且它不起作用。它适用于文本，但不适用于图像。任何人的帮助，将不胜感激。

【问题讨论】：

标签： javascript pdf

【解决方案1】：

您不能使用直接图片网址。您需要将图像转换为base64，然后将其添加到pdf中。此外，由于跨域请求，使用外部图像会在 Chrome / Firefox 中产生错误。

下面是完整的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <body>

        <input type = "text" id = "jjj">
        <button id="button" onclick="genratePDF();"></button>

        <script src = "jspdf.debug.js"></script>
        <script src = "jspdf.min.js"></script>

        <script>
            var input = document.getElementById('jjj');
//            var imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-100.jpg';
            var imgData = 'testimg.jpg';

            function genratePDF() {
                getDataUri(imgData, function (dataUri) {                    
                    generar(dataUri);
                });
            }

            function getDataUri(url, cb)
            {             
                var image = new Image();

                image.onload = function () {
                    var canvas = document.createElement('canvas');
                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;

                    //next three lines for white background in case png has a transparent background
                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = '#fff';  /// set white fill style
                    ctx.fillRect(0, 0, canvas.width, canvas.height);

                    canvas.getContext('2d').drawImage(this, 0, 0);

                    cb(canvas.toDataURL('image/jpeg'));
                };
                image.src = url;                
            }

            function generar(img) {                
                var texto = input.value;
                var pdf = new jsPDF();                
                pdf.addImage(img, 'JPG', 15, 40, 100, 100);
                pdf.text(30, 30, texto);
                pdf.save('my_pdf.pdf');                
            }
        </script>

    </body>
</html>

主要变化是 getDataUri() ;此函数生成您提供的图像的 base64 图像。然后在Callback中触发generar()生成PDF

function getDataUri(url, cb)
            {             
                var image = new Image();

                image.onload = function () {
                    var canvas = document.createElement('canvas');
                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;

                    //next three lines for white background in case png has a transparent background
                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = '#fff';  /// set white fill style
                    ctx.fillRect(0, 0, canvas.width, canvas.height);

                    canvas.getContext('2d').drawImage(this, 0, 0);

                    cb(canvas.toDataURL('image/jpeg'));
                };
                image.src = url;                
            }

这个 SO 问题可以帮助我解决这个问题 Convert a image url to pdf using jspdf

【讨论】：