I can't seem to load an Image to a PDF file using jsPDF

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

And it won't work. It worked with jsut the text, but not the Image. Anyone help, would be very appreciated.

score 0 · Accepted Answer · answered Sep 25 '17 at 04:59

you cannot use direct image url. you need to convert image to base64 and then add it in pdf. Also, using external image will generate error in Chrome / Firefox due to Cross origin request.

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() ; this function generates base64 image of your provided image. And then in Callback it triggers the generar() to generate 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

I can't seem to load an Image to a PDF file using jsPDF

1 Answers1