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

Question

I am trying to generate a PDF document from a HTML document sing an input and a pre loaded image in my javascript code, here are the codes: 我正在尝试从HTML文档中生成一个HTML文档，在我的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 Java脚本

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

And it won't work. 而且它不起作用。 It worked with jsut the text, but not the Image. 它使用jsut处理文本，但不处理Image。 Anyone help, would be very appreciated. 任何人的帮助，将不胜感激。

Answer 1

you cannot use direct image url. 您不能使用直接图片网址。 you need to convert image to base64 and then add it in pdf. 您需要将图像转换为base64，然后将其添加为pdf。 Also, using external image will generate error in Chrome / Firefox due to Cross origin request. 同样，由于跨源请求，使用外部图像将在Chrome / Firefox中生成错误。

Below is the complete code: 以下是完整的代码：

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

Main Changes are getDataUri() ; 主要变化是 getDataUri（）; this function generates base64 image of your provided image. 此功能生成您提供的图像的base64图像。 And then in Callback it triggers the generar() to generate PDF 然后在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;                
            }

this SO question helps me in this solution Convert a image url to pdf using jspdf 这个问题可以帮助我在此解决方案中使用jspdf将图像网址转换为pdf

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-25 04:59:44

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-25 04:59:44

解决方案1
0 已采纳 2017-09-25 04:59:44