jsPDF и загрузка изображений

Я пытаюсь использовать библиотеку jsPDF. Я хочу загрузить и вставить изображение и экспортировать файл PDF.

Моя проблема связана с загрузкой изображения. Я делаю это: var imageData = getBase64Image('thinking-monkey.jpg'); и я должен получить dataURL в base64 внутри 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 Кб и загружается не сразу. Итак, когда в return dataURL; переменная все еще не определена.

Я пытался добавить setTimeout() прямо перед return dataURL;, но, похоже, это не сработало.

Как я могу дождаться полной загрузки изображения, чтобы вернуть dataURL?

Спасибо.


javascript jspdf
person gael    schedule 28.08.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать обратный вызов. Передайте код, который вы хотите выполнить после полной загрузки изображения, в функцию 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") ;
person rowasc    schedule 05.09.2013

arrow_upward
0
arrow_downward

Переместите оператор «return» внутрь функции img.onload, я подозреваю, что это должно сделать это.

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 */
    }
}
person TheRealPapa    schedule 27.04.2014