jsPDF和图像加载

Question

我tryna使用jsPDF库。我想加载并插入图像，并导出PDF文件。

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

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

Answer 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 */ 
    } 
}