Jspdf: Incomplete or corrupt PNG file

[thilino]

I'm trying to add an image to my PDF document but get this error Uncaught Error: Incomplete or corrupt PNG file in this line doc.addImage(imgData, 'PNG', 15, 40, 180, 160); , this happens when I add imgData var to my PDF file but not when i add imgPDF var for test.

Any idea cuz this happens

        var zip = new JSZip();
        var img = zip.folder("documets").folder("products");
        var row = "txtRow";

        var imgData = value['data'];
        var imgPDF = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';

        var doc = new jsPDF('landscape');

        doc.text(20, 20, 'This is the default font.');
        doc.addImage(imgData, 'PNG', 15, 40, 180, 160);

        var pdf = doc.output();

        imgData = imgData.replace(/^data:image\/(png|jpg);base64,/, '');
        img.file("file.png", imgData, {base64: true});
        img.file("file.pdf", pdf,{binary: true});



    zip.file("products.csv", row);
    var content = zip.generate({type:"blob"});
    //FileSaver.js
    saveAs(content, "csv.zip");

[hauxon]

This happens because the image has not finished loading when you send it to jsPDF. You can ensure your image has finished loading before adding it to the document like this:

var myImage = new Image();.
myImage .src = 'https://www.myserver.com/somepath/myImage.png';.
myImage .onload = function(){.
doc.addImage(myImage , 'png', 5, 5, 40, 10);.
doc.save('myPDF.pdf');.
};.

Hrannar

[Luchooo]

El error no se trata de que cargue, una imagen base 64 ya esta cargada. La SOLUCION es cuestión de librerias jsPDF trabaja excelente con imágenes JPEG, en el siguiente URL se encuentra una versión antigua de jsPDF --> desarrollolibre.net/public/download/jspdf/jspdf.zip donde funcionan perfecto las imagenes JPEG, ahora bien el error Incomplete or corrupt PNG file, la imagen en base 64 que estas trayendo del servidor traela con formato JPEG de la siguiente forma var imagen = "image/jpeg";
imgData = renderer.domElement.toDataURL(imagen);, en esta ocasion la imagen se trata de todo lo que esta en la pagina HTML, si utilizas las librerias que te puse arriba lo mas probable es que salga error con las imagenes PNG por que es una version antigua y existen .js de soporte_png, pero lo mejor para trabajar imagenes PNG pequeñas no tan grandes como la que traes del servidor es trabjar con la version .min de jsPDF que la podras encontrar aqui https://github.com/MrRio/jsPDF/tree/master/dist. !!Espero haberte ayudado!! me paso lo mismo :+1:

[Luchooo]

En pocas palabras el error se debe a que la librería jsPDF no trabaja muy bien con imagenes PNG muy grandes, entonces cambia de formato la imagen que traes del servidor a JPEG y utiliza la version version .min

[naigueldev]

This error happened to me because the div that had the id of the screen total was at zero height. So I set the style with 100% height and absolute position, with that the PDF worked.

[echan7]

Hey,
@thilino have you solve the problem yet? I'm facing the same issues and I don't know what to do with it
Thanks :D

[AshotN]

I'm getting this issue as well, using Base64 which is fully loaded. It's not consistent either, some images cause it and some don't

[Uzlopak]

Well give us the problematic base64 example

[AshotN]

rofl my bad

iVBORw0KGgoAAAANSUhEUgAAAaoAAADnCAYAAABPPhLwAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAB0AAAAKAAAAHQAAABzAAALcIx9/pgAAAs8SURBVHgB7N1ryGVVGQfwcbyMOtWYWV5GrbTAyqTULlKJGEkpDaVopChheEHLCK1QECHNIBNUyiKlwrILZhaZ%2bEFRMtO0EiylEXOwm%2bH9lte0/g%2bvBzabdcbxQ2sPvL8F/9lnr7Ne1np/8%2bFhn3eftZcsWWjvyOH65LEXjnWuESBAgACB9UJg26zioeS/g9R59WsECBAgQGBygaOzgmGRmr0%2bdvKVWQABAgQIEIjAccmsOA2PN9MhQIAAAQLrg8BeWcSwQA1fr1ofFmgNBAgQILC4BTbIr39HMixQs9er079scfP47QkQIEBgfRD4bBYxK07j4xnrwwKtgQABAgQWt8Cm%2bfXXJOMiVefPJO9KNAIECBAgMKnAxzJ7q1BV35pkxaSrMzkBAgQIEIjAlcm8YnUJIQIECBAgMLXAyixg/OXfYeH69NQLND8BAgQIEDgsBMPiNHz9bN57PyICBAgQIDC1wLezgGGBGr5%2bMO%2b9ceoFmp8AAQIEFrdA3QV4SzIsUMPXf857WyxuIr89AQIECEwtsFMWsLa/V12V9zeZepHmJ0CAAIHFLfDB/Pr/SYZXU8PXP8p7Sxc3kd%2beAAECBKYWOD4LGBan8evzpl6g%2bQkQIECAwLkhGBeo4fkpiAgQIECAwJQCG2byy5NhcRq/PmrKBZqbAAECBAgsD8GNybhAzc6fy3uHYyJAgAABAlMKbJnJb09mxWl8rBsvDplygeYmQIAAAQLbh%2bDuZFykZue1e8VHMBEgQIAAgSkFdsnk9yWz4jQ%2bPp339p9ygeYmQIAAAQK7h2BtXwh%2bMu/X97A0AgQIECAwmUA9UPHRZHxFNTuvK6tVk63OxAQIECBAIALvSR5PZsVpfKwnBB%2bcaAQIECBAYDKBfTLzE8m4SM3O627ATyYaAQIECBCYTOADmbn%2bLjUrTq3jyZOtzsQECBAgQCAC%2byZr%2bxiwitc5yQaJRoAAAQIEJhF4b2Zd2w0WVawuTTabZHUmJUCAAAECEXhncn/S%2bvhv1lfbMb0m0QgQIECAwCQC9aXgvyazwtQ63pX33zzJ6kxKgAABAgQiUNst3Z60itSs75G8f0CiESBAgACBSQRqI9tfJbPC1DrWzuufm2R1JiVAgAABAhFYlvwgaRWpYd/3MsZNFkHQCBAgQKC/QN2SfkYyLEyt13/ImNclGgECBAgQmETgiMz6VNIqUrO%2bumNwv0lWZ1ICBAgQIBCBvZJ/JbPC1DrW361OSXw5OAgaAQIECPQXqDsC62O%2bVpEa9v0yY%2bqGDI0AAQIECHQX2Dwzfj8ZFqbW67szph4pohEgQIAAgUkEPpNZ6xH2rSI166vHhdQ4jQABAgQITCKwd2Z9sb9bVdH6eeKjwEn%2bi0xKgAABAitDcF0yu4qad/xbxrwPFwECBAgQmEJgo0x6VjKvSM3662GMpyZLE40AAQIECHQXWJUZH0pmhWne8dqM2SHRCBAgQIBAd4HXZ8abknlFatZfBe2Q7qszIQECBAgQiMDGyVeT55NZYZp3/E7GvCzRCBAgQIBAd4EPZcZ7k3lFatZ/Z8bUzhcaAQIECBDoLrBdZrw6mRWlece60eL0pK7GNAIECBAg0FWg7vL7QlJfAJ5XqGb9v8uYNyUaAQIECBDoLrBHZlydzIrSvOMTGXNCYnPbIGgECBAg0Fdgeaa7IJlXpIb99ZHhjn2XZzYCBAgQILAg8NEc7kuGhan1%2bpGMOXLhR/xLgAABAgT6Cmyd6S5PWgVq3Ffjtu27PLMRIECAAIEFgWNyeDwZF6fx%2bQMZc%2bjCj/iXAAECBAj0FXhDprshGRen1vllGbdN3%2bWZjQABAgQILFmyYRBOTp5OWgVq2FdXV4clGgECBAgQ6C7w1sx4SzIsTPNe17OuXF11/y8yIQECBAjUDhVfTF7sKcJVwB5MDk80AgQIECDQXWDPzHhbMu%2bKath/RcZ5fEj3/yITEiBAgMCyEJyZ1H6Aw8LUev1oxhyb2NUiCBoBAgQI9BWoq6s/Ja0CNe67JuN27rs8sxEgQIAAgSVLNgnCl5J1%2bdtV7Rl4YlJ3E2oECBAgQKCrQG1we2syvpJqnd%2bccbt1XZ3JCBAgQIBABOrOwNOSdfneVV2B1ZVY/b1LI0CAAAECXQV2zWy/TVpXU%2bO%2b1Rm3d9fVmYwAAQIECESg/g51UlJ/lxoXp/H58xnzzWRFohEgQIAAga4CtWfgtcm4OLXO/5FxByYaAQIECBDoKlDfoTo6eThpFahx388ybmWiESBAgACBrgLbZbbaaX1cmFrn9UXhTyVLE40AAQIECHQVOCiz3ZO0CtS4rx41UpviagQIECBAoKvAFpntwmRcmFrnz2Rcbdm0WaIRIECAAIGuAvtktrpFvVWgxn1/ybj9Eo0AAQIECHQVqC/9np7UldO4OLXOL864rRONAAECBAh0FXhLZrs%2baRWncV898%2bqoxK7sQdAIECBAoJ9AFZ7jkkeScXFqnf8646rAaQQIECBAoKtA3cp%2badIqTuM%2bN1t0/a8xGQECBAgMBT6ck7uTcXFqnd%2bVcfsPf9hrAgQIECDQQ2B5Jjk7WZcnClcBuySpKzKNAAECBAh0FXh7ZrspaV1NjftqZ4sTEg9pDIJGgAABAv0EakulKkBViMbFqXX%2b%2b4zbM9EIECBAgEBXgdq09idJqziN%2b57LuPOTVyYaAQIECBDoKlA3T6xJxsWpdX5vxn0i8d2rIGgECBAg0E9g80z15WRdd7aoLxXv3m95ZiJAgAABAgsC9cXf65LW1dS4rz4O/EbyqkQjQIAAAQLdBOpjvSOT%2b5NxcWqdP5BxxyfuDgyCRoAAAQL9BOpK6YLk%2baRVoMZ9f8y4fRONAAECBAh0FXh3ZrslGRemeec/zdidu67QZAQIECCw6AXqY736eK92XJ9XoIb9T2fcWcmKRCNAgAABAt0EtspM30rqRophYZr3um5nPzbx96sgaAQIECDQT6B2qljX515VEbstOaDf8sxEgAABAgQWBA7L4e/JvCuqcf/VGVv7DWoECBAgQKCbwPLMdHryRDIuTK3zuovwomSHRCNAgAABAt0EdsxMP0xaxanV92TGnpm8ItEIECBAgEA3gb0y041Jqzi1%2buqGi7qjcKNEI0CAAAECXQRqd4uPJ2uSVnFq9d2RsQcnNrwNgkaAAAECfQSWZZqTkoeSVnFq9d2UsXa4CIJGgAABAv0EtsxU5yTrujt7FbArk7clGgECBAgQ6CZQWytdkrSupFp9dYfgxclOiUaAAAECBLoJ1A0Xv0laxanVV1synZe8OtEIECBAgEA3gYMy0%2bqkVZxafY9m7GnJyxONAAECBAh0Eajb0o9J/pm0ilOr776MPTHZNNEIECBAgEAXgc0zyynJw0mrOLX6avumoxPfwQqCRoAAAQJ9BOqBjWcnTyWt4tTquzNjD02WJhoBAgQIEOgiUFsyfTdZ10eKVAG7NVmVaAQIECBAoJvArpnpF0nrSmpe3w0Z70vD3f6LTESAAAECJVC3tF%2bTzCtOrf6rXvi5HDQCBAgQINBHYL9Mc3PSKkzz%2bq7I%2bD36LM8sBAgQIEBgQeDAHOrJwfOKU6v/sozfbeHH/UuAAAECBP7/AnWX3xHJmqRVmFp9tS3Tj5NdEo0AAQIECHQR2Diz1DOt7klaxanVV3cTXpTU/oMaAQIECBDoIlBfGv58cn/SKk6tvmcz9sLktYlGgAABAgS6CNRegKcmL2WXi9r49vxkh0QjQIAAAQJdBLbILGckjyWtq6lWXxWsryfbJxoBAgQIEOgisFVm%2bUry76RVnFp9tYXT15KViUaAAAECBLoIbJNZzk1eyj6CNbaehbVdohEgsEgF/gcAAP//EdMsRgAAC7ZJREFU7d1tzJZlHcdxhJQSNFQQMdAMFDMpm9ha5pTcKLNChxqLMmDLxKxsarGlYllm9LQ0xIcQQisoymYZLQyXiaE9WSmZk0I0NUVNURFB6/t74dZ6E8d53/%2brXnz/2/eF2/nAPr44dl73eR3XgAGOAr0VGM3tLqPn6J/b2WaO%2byqNIkcBBRRQQIGeCOzHXRbSVmpZsL7C8XuRo4ACCiigQE8EXsVdFlHLgvUMx2fB8gkLBEcBBRRQoDcCY7nNYtpGLU9YF3P8K8hRQAEFFFCgJwL7c5cl1LJgPcvx82kMOQoooIACCvRE4ADucjW1LFhbOD4vauxLjgIKKKCAAj0RGM9dvknP0/Z%2bJJg3Cq%2bk/P3LUUABBRRQoCcCB3KXb1HLgpUXNPKixjhyFFBAAQUU6IlAnrBaPxLMx4f5u1fOdRRQQAEFFOiJQF66WEwtr7XnaWwpTSBHAQUUUECBngjk71ALqWWnixc4/gc0kRwFFFBAAQV6IvBK7nIFtSxYeTljBR1OjgIKKKCAAj0R2Ie7XEp5VX173xLMcavoLeQooIACCijQE4HR3OUSyoa2LQvWao4/hhwFFFBAAQV6IpD9AL9ET1PLgvVrjj%2bOdiBHAQUUUECBcoHh3OFCeoJaFqw7OH46DSJHAQUUUECBcoFh3GEuPUYtC9Y6jj%2bFdiJHAQUUUECBcoFduMMcephaFqy/cfzHaAg5CiiggAIKlAvszB3OoCxALQvWIxx/DuUJzVFAAQUUUKBcYDB3mE3rqWXByt%2b8Pkd7kqOAAgoooEC5wI7cYSb9mVoWrPzqcH7EcQw5CiiggAIKlAsM5A4n0e3UsmBlZ4yryA1wQXAUUEABBXojcCy3yReBWxasbIC7nNxPEARHAQUUUKA3Akdxm59Sy4KVY1eS2zOB4CiggAIK9EbgMG5zLWUX9pZF6zaOP57c7QIERwEFFFCgXuA13OIayg8ztixYf%2bL4GZQXNxwFFFBAAQXKBfKbWJfTs9SyYG3g%2bI9SvsvlKKCAAgooUC6wN3f4Aj1JLQvWRo4/j3YnRwEFFFBAgXKB3bhDdq3I7hUtC9Ymjv8y%2bV0sEBwFFFBAgXqBfKT3EbqXWhasfBdrMeVvYI4CCiiggALlAnlp4v20lloWrLxV%2bEN6MzkKKKCAAgqUC%2bS19ONoDbUsWDn2FppCvtoOgqOAAgooUC8wiVt0%2bfJwnspmkr%2bLVf//yDsooIACCiBwKH2HsuVSy1PW/Rx/FuV3tRwFFFBAAQXKBcZyhwW0mVoWrMc5/kIaRY4CCiiggALlAntyh89SFqCWBWsLxy%2bkg8hRQAEFFFCgXGAodziT7qOWBStvCl5P%2bRuYo4ACCiigQLlAXm2fQXdSy4KVY39D0%2bgl5CiggAIKKFAqkNfS30U3U%2buCtZ5zzqA8pTkKKKCAAgqUCxzOHa6j1p8Zyd%2b9LqLsSegooIACCihQLvBq7vB1at21PS9eLKYJ5CiggAIKKFAuMJI75E3BR6n1Y8EVnHM0OQoooIACCpQLDOEOH6Z11Lpg/Y5zppMvXoDgKKCAAgrUCgzi8ifSrdS6YOXHHPNa/K7kKKCAAgooUC5wBHfo8uLFE5w3j0aX/wu9gQIKKKCAAgiMpyuodYum/DbWEnodOQoooIACCpQLZIumT9NGav1YMLu9TyZHAQUUUECBcoH8%2bvBpdA%2b1Lli/55yTyZ8aAcFRQAEFFKgVGMjlp9It1LpgPcg559IIchRQQAEFFCgXyI4X19Lz1LJo5e9e%2beLxweQooIACCihQLrA/d1hAz1DLgpVjV9LbKXsTOgoooIACCpQKDOfqc%2blhal2w7uKc2ZS/hTkKKKCAAgqUCryMq59Kd1PrgvUY52QjXL%2bPBYKjgAIKKFArkBcv8lMjq6h1wdrKOd%2bmN5CjgAIKKKBAuUC%2bALyYWnduzwK3mrLFU7Z6chRQQAEFFCgVGMnVP0V/p9anrHs55ywaRo4CCiiggAKlAoO5%2biz6A7UuWJs45xIaR44CCiiggALlAvl9qx9R6y8Q5/tb2UB3EjkKKKCAAgqUCxzAHebTU9T6lHU758ygPKk5CiiggAIKlArsxtU/ThuodcF6iHPmUjbTdRRQQAEFFCgVyK8Hv5t%2bSa0LVt4uvIoOIUcBBRRQQIFygTdyh2WU71e1Llo3cc4J5OvtIDgKKKCAArUCY7j8PHqcWhesfJQ4h/YgRwEFFFBAgVKBIVz9Q9Rlm6ZsnnslvZYcBRRQQAEFSgWy6/o76GfU%2boSV42%2bk48mPBUFwFFBAAQVqBfKElBco8ntXrYvWes45m3YnRwEFFFBAgVKB/ILwJ%2bl%2bal2wXvxYMHsTOgoooIACCpQKvPh6eza1bV2wcvzPKW8L5jqOAgoooIACpQKHcvVv0BZqXbTu45w8oeVJzVFAAQUUUKBUIDtWnEcPUOuClS8RZ7GbSI4CCiiggAKlAjty9ffQGmpdsHJ8dsuYTjuRo4ACCiigQKnAYVx9CXX5WDC/q3UBjSZHAQUUUECBUoF8LHgOdXlbcCvnLaejyFFAAQUUUKBUIG/5nUS/oC4fC97BebNpKDkKKKCAAgqUCmT39YXU5UvET3DexTSeHAUUUEABBUoFspHtJ2g9dXnKuoHz3KoJBEcBBRRQoFYgewJOoZX0ArUuWvlO1rm0FzkKKKCAAgqUCuQjvXy0l4/4Whes5zhnKR1BjgIKKKCAAqUCeWniNLqTWhesHP9H8uULEBwFFFBAgXqBSdzie7SNWhetJzlnPk0gRwEFFFBAgVKBfAH4M/QQtS5YOT6vxmfnDHe%2bAMFRQAEFFKgTyFZN06jrd7Ie5tyLaD9yFFBAAQUUKBXIR3oLaBO1PmU9zzk/pndS3jx0FFBAAQUUKBPYlSufTmupdcHK8Rsor7jvTY4CCiiggAKlAnn54ruUvQJbF62c832aTDuQo4ACCiigQJnAKK6cp6R8Ibh1wcrx6yg7Z2RjXUcBBRRQQIEygfz9KTtf/IS67HyRnyrJF4nzpOYooIACCihQKjCWq8%2bjR6jLU9bdnHc2jSBHAQUUUECBMoHBXPm9tJq6LFh5ylpGR5N/ywLBUUABBRSoEziYS3%2bN/kFdFq17OG8OjSRHAQUUUECBMoGdufIsuo26LFjZFHc5vY0GkqOAAgoooECZwOu58uXU5YvEWeTyvazzaR9yFFBAAQUUKBPYhSufSr%2blLk9Z2f0ibxueQO4xCIKjgAIKKFAnMJFL9%2bUpK3sMfpEOqvsnemUFFFBAAQUGDBgKwgfoV9TlKSvnrKFTKFs/OQoooIACCpQJHMKVL6Uuv0icBetpWkJHka%2b5g%2bAooIACCtQI5I3BGXQzdX3KypZN2fJpX3IUUEABBRQoEziQK%2bdvUfmbVJdFK9s8raKTaQg5CiiggAIKlAjkBx6n0grK239dFq28Hr%2bIjiQ/GgTBUUABBRSoEcj3qc6jv1CXBSvn/JUuoPHkKKCAAgooUCKQp6JJdDU9Q10XrVs593QaTo4CCiiggAIlAi/nqh%2bkLDpdF6xs23QdTaO80OEooIACCihQIpAvAc%2bjB6jrovUU515Dx1L%2bPuYooIACCijQ7wKDuOIxtJQ2U9dFayPnXkb5mDHXdBRQQAEFFOh3gWFcMR8N3kJdF6yc9xDNpyPJXd1BcBRQQAEF%2bl9gHJc8n/LbV31ZtB7k/DxpvZX8eBAERwEFFFCg/wXexCUX0KPUl0UrPxSZv2mdSHmxw1FAAQUUUKBfBfKzIVMof8/KnoF9WbS2cv6NdDZNIL9cDIKjgAIKKNB/AtnRfTpdT1l0%2brJo5dxs/7SMZtFLyVFAAQUUUKDfBPbgSvkZkpW0jfq6aN3FNXJNRwEFFFBAgX4XGMEV8%2bbgDdSXRevz/f4v84IKKKCAAgr8h0CeimZSdrJo/Y5WPlJ0FFBAAQUU6JlAfj5kKi2ifM/qv3086BMVSI4CCiigwP9GIG/4TaTs7n4TbaF/X7jW8t/%2bjQoERwEFFFDg/0Mgm9tOpjPpfZT/HvAvAy1Ub%2b46lkoAAAAASUVORK5CYII=

[Uzlopak]

I replaced %2b by +. Works in Chrome.

[AshotN]

Did you receive any error before the replacement?

I'll try that though, thanks

[Uzlopak]

Yes but not the incomplete or corrupt PNG file error.

[AshotN]

Alright, doing the replace fixed it. Thanks

Is there anything we can add to jsPDF to make that conversion implicit, or should it be left to the dev?

[Uzlopak]

Well it is the job of the customizing developer to supply valid base64 code. I thought about a regex validation but still...

[AshotN]

But isn't %2b still valid Base64, or am I understanding it wrong. Perhaps a global setting to try to auto correct the Base64? Or maybe a add a note to the error message linking to this issue? Just something to prevent the confusion that I fell into

[Uzlopak]

%2b is not valid base64. The symbol % is not part of the used symbols set. Probably happens because the + is a htmlentity (or something like this). You could easily fix it by using unescape.

What I would agree is, that you there should be a base64 regex check. But I would refuse an auto correction of the base64-code. If you need a conversion, then the developer should be aware of the problem, that there is a conversion problem. I mean, where do you want to draw the line? the next one would like to remove html-tags out of the string, one other would like to give convert it from something else and the next one wants a performance optimized addImage-Routine, and refuses all the sanitation-functionality.

[AshotN]

I think a link to this thread might be helpful. IDK just a thought, thanks anyway for you help :)

[Uzlopak]

In PR #1486 I added the ability to check the base64 encoded for errors.

Like I wrote you, I think that data "fixing" is not a job of the libraries.

[AshotN]

Alright, works for me :)

Thanks for your help!

[Uzlopak]

When I read again the original issue I think the problem is solved. With #1486 addImage accepts plain base64 strings without being preceded by "data:image/png;base64". The preceding "data:image/png;base64" was necessary to determine the file type by the given MIME-type. Now it is determined by the magic headers of the image files.

[AshotN]

Close the issue, if it persists OP can re-open or make a new one

[Uzlopak]

Solved by PR #1486
Merged on 11 January 2018
Will be part of next version.