jsPDF 不完整或损坏的 PNG 文件

jsPDF Incomplete or corrupt PNG file

本文关键字：PNG 文件 损坏 jsPDF      更新时间：2023-09-26

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

不完整或损坏的PNG文件

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

var image = "data：image/png;base64，iVBORw0KGgoAAAANSUh...等";

可能是什么问题？

编辑：我将图像的格式更改为jpg，并显示此错误

Supplied data is not a JPEG

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

编辑：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");
相关文章：