JsPDF Incomplete Or Corrupt PNG File

Adding regular png images was no problem with jsPDF, but now i send a generated image from my server and the browser console displays this error when rendering the PDF file: Inco

Solution 1:

This type of error occurs because the image has not finished loading when you send to jsPdf, use onLoad event to check the image loaded completely. for Example -

 /* where src = full image url
        callback = is callback function
        outputFormat = image output format */
    function toDataUrl(src, callback, outputFormat) {
                var img = new Image();
                img.setAttribute('crossOrigin', 'anonymous');
                img.onload = function () {

                   /*image completely converted to base64string */
                    var canvas = document.createElement('CANVAS');
                    var ctx = canvas.getContext('2d');
                    var dataURL;
                    canvas.height = this.height;
                    canvas.width = this.width;
                    ctx.drawImage(this, 0, 0);
                    dataURL = canvas.toDataURL(outputFormat);

                    /* call back function */
                    callback(dataURL);
                };
                img.src = src;
                if (img.complete || img.complete === undefined) {
                    img.src = appConfig.config.dummyImage;
                    img.src = src;
                }
            }



  function callbackBase64(base64Img)
    {
           /*base64Img contains full base64string of image   */
           console.log(base64Img);
    }

call above function and get base64string of image -

toDataUrl('http://example1.com/image1.jpg', callbackBase64(base64Img), "image/png");