Trying to Add Image to Pdf Using Jspdf

Insert jpg image and create pdf using jsPDF

Seems that file myimage.jpg cannot be used directly in jsPDF, according to my research.
Image should be rather, converted to base64 file, and used that way in jsPDF. There is a great tool that I find for converting both jpg and png files here https://www.base64-image.de/ to base64.

Since those files are quite bulky, they will increase size of your javascript file. I find a solution for that, to put content (base64) of myimage.jpg file inside myimage.js:

var myImage = 'data:image/jpeg;base64,/9j/4QAYR..very..very....long...string...'

include that file inside your html file:

<script type="text/javascript" src="/js/myimage.js"></script>

Inside your main javascript file you can write:

var doc = new jsPDF();

doc.text(10, 10, 'Hello world!');

doc.addImage(myImage, 'JPEG', 10, 30, 150, 76);

doc.save('a4.pdf');

You will end-up with Hello world! and image underneath.

If you a new to jsPDF you can learn more at https://parall.ax/products/jspdf

Hope that helps a bit ;)

Trying to add image to pdf using jsPDF

Simple solution:

Instead of using jsPDF.js library use jsPDF.debug.js , it includes all the modules which we need.

Add multiple different images to PDF with jsPDF

I should have had to give more attention to the documentation, there are alises in case you have to add multiple images, so the finale code should look like that:

var doc = new jsPDF("landscape");
const img1 = $('#img1').attr("src");
const img2 = $('#img2').attr("src");
doc.addImage(img1, "JPEG", 140, 15, 90, 90, "alias1", 'SLOW');
doc.addImage(img2, "JPEG", 140, 110, 90, 90, "alias2", 'SLOW');
doc.save("sample.pdf");

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

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

Adding Image to pdf created using jsPDF and then zip pdfs using jsZIP

There is a little issue in your code as while creating a pdf file just pass blob as a parameter while passing pdf content to JsZip.file(filename, pdf.output('blob'));

CODE Example

zip.file('name.pdf', jspdf.output('blob'));