javascript - jsPDF和图像加载

Question

我尝试使用 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？

谢谢。

Answer 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") ;