jsPDF不完整或损坏的PNG文件。

Question

jsPDF不完整或损坏的PNG文件。

javascriptjspdf

3

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

不完整或损坏的PNG文件

显然，该图像不是不完整或损坏的，因为我可以看到服务器的响应，并且图像很好。另外，为了避免在图像准备就绪之前呈现pdf文件，我对保存图像值变量的“a”进行检查，以确定其是否未定义/为空。我的图像格式为

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

可能的问题是什么？

编辑：我将图像格式更改为jpg，出现此错误。

Supplied data is not a JPEG

如果我使用这个库jspdf.plugin.addimage.js，图片会被正确地渲染，但是PNG图片不行。

编辑：2 我通过修改jspdf.plugin.addimage.js文件中的函数addImage来解决了这个问题。我只是改变了函数的名称，并用该函数将生成的图像添加到PDF中。由于jspdf.min.js版本中具有相同名称的函数，因此使用这种方法不会覆盖该函数，我可以使用能够处理常规图像和服务器生成图像的函数。

- Progs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ravindra Vairagi · Accepted Answer

这种错误是因为在你将图片发送给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");