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