jsPDF 및 이미지 로딩

Question

저는 tryna에서 jsPDF 라이브러리를 사용하고 있습니다. 로드하고 이미지를 삽입하고 PDF 파일을 내보내려고합니다.

제 문제는 이미지로드에 관한 것입니다. 나는이 일을하고있다 : var imageData = getBase64Image('thinking-monkey.jpg'); 그리고 내가 imageData 안으로 base64의 dataURL을 얻어야한다.

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 이하 같다 한번에로드하지 않기 때문에 그것은 '정의되지 않은'반환 :

내 getBase64Image() 기능은 다음을 수행합니다. 따라서 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 */ 
    } 
}