jsPDF 不完整或损坏的 PNG 文件

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

PNG 文件不完整或损坏

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

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

可能是什么问题呢？

Edit:我将图像格式更改为 jpg，并且显示此错误

Supplied data is not a JPEG

如果我使用这个库jspdf.plugin.addimage.js图像渲染正确，但 png 图像渲染不正确。

edit: 2我做了一个解决方案修改jspdf.plugin.addimage.js文件功能addImage，我只是更改了函数的名称，并将使用该函数生成的图像添加到 pdf 中，因为jspdf.min.js相同的函数具有相同的名称，这样它就不会覆盖该函数，我可以使用适用于普通图像和服务器生成的图像的函数。

出现此类错误是因为发送到 jsPdf 时图像尚未完成加载，请使用 onLoad 事件检查图像是否已完全加载。例如 -

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

调用上面的函数并获取图像的base64字符串 -

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