jsPDF不完整或损坏的PNG文件 [英] jsPDF Incomplete or corrupt PNG file

问题描述

使用jsPDF可以添加常规png图像没有问题，但是现在我从服务器发送了生成的图像，并且浏览器控制台在呈现PDF文件时显示此错误:

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:

PNG文件不完整或损坏

Incomplete or corrupt PNG file

显然，该图像不是不完整或损坏的，因为我可以看到来自服务器的响应并且该图像很好. 另外，为了避免在准备好图像之前渲染pdf文件，我会检查a，如果未定义/为null，则保存图像值变量. 我的图片格式是

obviously the image is not incomplete or corrupt because i can see the response from the server and the image is fine. Also to avoid render the pdf file before the image is ready i make a check to a that holds the image value variable if is undefined/null. the format of my image is

var image ="data:image/png; base64，iVBORw0KGgoAAAANSUh ... etc";

var image = "data:image/png;base64,iVBORw0KGgoAAAANSUh...etc";

可能是什么问题?

编辑:我将图片的格式更改为jpg，并且显示了此错误

i changed the format of the image to jpg and this error shows

Supplied data is not a JPEG

如果我使用此库jspdf.plugin.addimage.js，则可以正确渲染图像，但不能正确渲染png图像.

if i use this library jspdf.plugin.addimage.js the images are rendered correctly but not the png images.

2 我提出了修改jspdf.plugin.addimage.js文件功能addImage的解决方案，我只是更改了功能的名称，并使用该功能将生成的图像添加到pdf中，因为该版本jspdf.min.js的名称具有相同功能的相同功能，因此不会覆盖该功能，我可以使用与正常图像兼容的功能以及由服务器生成的功能.

edit: 2 i made a solution modifying the jspdf.plugin.addimage.js file function addImage, i just changed the name of the function and added those generated images to pdf with that function, since the version of jspdf.min.js has the same name for the same function with this way it won't override the function i can use the one that works with normal images and the ones generated by the server.

推荐答案

由于将图像发送到jsPdf时图像尚未完成加载，因此会发生此类错误，请使用onLoad事件检查图像是否已完全加载.例如-

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

调用上面的函数并获取图像的base64string-

call above function and get base64string of image -

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

这篇关于jsPDF不完整或损坏的PNG文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！