Jspdf: Saving PDF with image fails

[rogerfar]

Create a ticket with an image, it will fail on the following line:

var datauri = ('' + type).substr(0, 6) === 'dataur'
                    ? 'data:application/pdf;base64,' + btoa(buildDocument()) : 0;

With the error:

Error: Error in function Error (native): Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
    at Console.$window.console.error (http://localhost:3333/App/Business/AngularErrorHandler.js:43:23)
    at Object.__safeCallWrapper [as output] (http://localhost:3333/Scripts/jsPDF/jspdf.js:471:44)

[MrRio]

Can you try get an example running – http://jsbin.com/rilace/edit?html,js,output

[rogerfar]

Yes, here it is:
http://jsbin.com/holakawuho/1/edit?html,js,output

[MrRio]

Strangely, that works for me on mobile Chrome on iOS, but not on desktop

[rogerfar]

Odd thing is that .save() works, but .output() doesn't

[MrRio]

Thanks for that. Yeah that is odd. git-bisect time!

[agcyphers]

I'm seeing the same thing on Windows with latest Chrome and Firefox. Any word on a fix?

As an example, here's the image data I'm trying to add:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEZUlEQVR4nOXbXagVVRgG4Oeco3lOaj+GZmlBafRDxS4itAiiKIiiiyK9EKKoiIQg+iOwoovKCgKFIqggCiMkshNEFF4kFRQFFobYH1LRD2JKGpVinuliuWm7z96zZ2avmdnaC+/Vmfm+7117Zr3rW2sO/x/cgO+RtPCjOguqCg1scLDwJvfUVlUFmI3nsV9n8Qm+ra26EjEV9+B33YU3OV5LhSXianytt/AmH6unzPg4E+/KLrzJZXUUGxPHYBX2yS8+ESbIQxIjuAPbFROeCJPjaNWFx8Bl2KS48EPWAU7FOv0LP+QcYAZWCouWrOKyXDvwDjCEm/CLfL/sBtnWAAPtAIvxqfyP9ZP4IuO1jYq05MJ8rMGEfML34kaszXj9wDnAKB7Cn/L/6jtxKVbkuGegHGCJyW1qVm7FGbhWvqdmvAJdPXEePlBMeIJPMAdnYXfOe2t1gDl4QXqb2otvYAyz8F2B+2txgCNwL3blLLadT2NYWA6vLxijUa7UybgG3xQstsl/sLwl5qqCcSp1gKJtajv/EHr9Jm7uI1YlDnAsViveprbyZ2HCbGKxfMvido6XIbiJEeEx/a2PAlu5CSe1xJ+HX/uMWZoDXI4v+yyule/hqJb4o/gsQtzoDrAAb0YUngg2OaUtz5pIsRuxhM/EE/p7H9s5gQc65Lo/UvwoDjAkzML9vovt3IOlHfJdpb9FUyv7doCLxHkP27kdF3fId7psvX1WjhcVPh+vliA8ERZICzvkPBpfRc6V2wHG8LBibWoWfojjOuQdxjsl5MvlAEvxQ0nCE7yGaV1yP1VSzkYW4ecLv0xZwhM8LkymnbCspJw9HeB4vCjejNuJ+3BrSg0X4O+Scnd1gBFx2tRe3IUrU8TPxU8l5h/vlvjlkoUn+BHnpIifho9LrqGrA8RcyXXiRpyYIh5eKrmGRIoDxPbaVr6N6T3E31WB+ESKAywqaRCeFeaXNFwh7PSULb6nAwwdKGad/jcx9uPuHsIJq7+dFYhP5OwB5uERYScmb6K/cF2GHDOxuSLxiYI9wJQDYtbLduiwDRdmiDuEtyoUn4iwC3SasB29o0uCLTglY6xHI4vLwmi7QKPCIWSrZ78vfKuTBUsKCuiXjYJ6U9HAfcKBR9bry+oq0zgQJ8GzldtZpjHVAYajSeyOqcJZ3skV5OqEzWl/rGIAnsElFeTphtQBKBvL1fPYl+IAeXGCOEdjpTpAma/AdJMPN6rGhNDndEUVc0Cd2KrHP0UM2gDsiByv5wQ4SAOwVTgIORfPCd8E9ItaHWCh7BPVbpzddv8M3I7Pc8QZGAcg+wBMCJ+5pWGRsHeZd8e4EVFPbmQdgBU5Ys4SNluy/FtM7T1AlgFYWzD2kPBBxuu6rzW29FF7FPQagI04MkKeuXjQ5Gbrzgix+0LaAGxz8Lc/MTAsfEm2EtdHjl0I3QZgr87fAhx2WKDzANxSZ1FVYrrJtrW61opqwG3+G4RX9D4oOSwxJvumaeX4F6XgWQgyw/tyAAAAAElFTkSuQmCC

And here's the code:
thePDF.addImage(imageData, "PNG", 0, 0, imageWidth, imageHeight);

[mvanroon]

Same problem here. Only fails on png's for me.

[agcyphers]

I've reverted to 1.0.272 until this is addressed.

[nadous]

Same problem too. Fail with canvas having a drawn image then masked by a rounded rectangle. The Firefox error is more verbose:

Error in function n/At: String contains an invalid character DOMException [InvalidCharacterError: "String contains an invalid character"
code: 5
nsresult: 0x80530005
location: ***/jspdf.min.js:279]

See also: WindowBase64.btoa().

[Alorse]

Some progress with this issue?
If you replaced in the jspdf.min.js file:
btoa(vt())
to:
btoa(unescape(encodeURIComponent(vt())))

The file is generated correctly, but the images are not seen.

[sda399]

trying to render charts and pies here, same problem.
I could've live with save() if only png was better than jpeg, in the rendered pdf document

[Mario-Eis]

Same issue here. JPG works fine, PNG fails.

[CraigMySeniorCenter]

I have images (logos) saved on an external domain. Some are png, some are jpeg. To work around this issue, I wrote the following function. It takes an image url and converts it to jpeg data uri.

    getDataUri(imgUrl, function(dataUri) {
        logo = dataUri;
        console.log("logo=" + logo);
    });

    getDataUri(url, cb)
     {
            var image = new Image();
            image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain

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

[atdiff]

@MrRio any update on this? I'm getting similar errors. Doesn't occur in 1.0.272 but does in 1.2.61.

[MrRio]

This is now fixed in https://github.com/MrRio/jsPDF/pull/852