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;
}

但是它返回'undefined'，因为图像像65 Kb并且不会立即加载。因此，当return dataURL;时，变量仍未定义。

我尝试在setTimeout()之前添加return dataURL;，但似乎无效。

如何等待图像完全加载以返回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 */
    }
}

jsPDF和图像加载

2 个答案: