Juan Pimentel Juan Pimentel - 2 months ago 13
Javascript Question

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

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.

Answer Source

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