Question

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

PNG文件不完整或损坏

显然图像不完整或损坏，因为我可以看到服务器的响应，图像很好。另外为了避免在图像准备好之前渲染pdf文件，我会检查一个包含图像值变量的文件，如果是undefined / null。我的图像格式是

var image =＆＃34; data：image / png; base64，iVBORw0KGgoAAAANSUh ... etc＆＃34 ;;

可能是什么问题？

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

Supplied data is not a JPEG

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

编辑：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");

jsPDF PNG文件不完整或损坏

1 个答案: