jsPDF和图像加载答案

【问题标题】：jsPDF and image loadingjsPDF和图像加载
【发布时间】：2014-04-27 23:11:03
【问题描述】：

我正在尝试使用 jsPDF 库。我想加载和插入图像，然后导出 PDF 文件。

我的问题是关于图像加载。我正在这样做：var imageData = getBase64Image('thinking-monkey.jpg');，我应该在imageData 中获取 base64 中的 dataURL。

我的getBase64Image() 函数执行以下操作：

function getBase64Image(url) {
    var img = new Image();
    var dataURL;

    img.src = url;

    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);

        dataURL = canvas.toDataURL('image/jpeg');

    }

    return dataURL;
}

但它返回“未定义”，因为图像大小为 65 Kb，不会立即加载。所以当在return dataURL; 时，变量仍然是未定义的。

我尝试在return dataURL; 之前添加一个setTimeout()，但它似乎不起作用。

如何等到图片加载完毕才返回dataURL？

谢谢。

【问题讨论】：

标签： javascript jspdf

【解决方案1】：

您可以使用回调。将图像完全加载后要执行的代码传递给getBase64Image函数，在.onLoad函数中执行。

应该是这样的。（generatePdf 是一个函数）

function getBase64Image(url,generatePdf) {
    var img = new Image();
    var dataURL;

    img.src = url;

    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);

        dataURL = canvas.toDataURL('image/jpeg');
        generatePdf(dataUrl);
    }
}
var generatePdf= function generatePdf(imageData){
   /** this function receives the image param and creates the pdf with it**/
   var doc = new jsPDF();
   doc.addImage(imageData, "JPEG", 60,50); 
   doc.save("test.pdf");
};

function generateImagePdf(url){ 
    getBase64Image(url, generatePdf);
}
//now call the generateImagePdf function, which will call the generateBase64Image function and wait for tyhe image to load to call the generatePdf function with the param
generateImagePdf("imageurl.jpg") ;

【讨论】：

【解决方案2】：

在 img.onload 函数中移动“return”语句，我怀疑应该这样做。

function getBase64Image(url) {
    var img = new Image();
    var dataURL;

    img.src = url;

    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);

        dataURL = canvas.toDataURL('image/jpeg');

        return dataURL;   /* MOVED */
    }
}

【讨论】：