javascript - jsPDF 不完整或损坏的 PNG 文件

Question

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

Incomplete or corrupt PNG file

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

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

可能是什么问题？

编辑:我把图片的格式改成jpg，出现这个错误

Supplied data is not a JPEG

如果我使用此库 jspdf.plugin.addimage.js，图像会正确呈现，但 png 图像不会。

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

Answer 1

出现这种错误是因为发送给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);
    }

调用上面的函数得到图片的base64string -

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