0

我正在尝试使用 jsPDF 库。我想加载和插入图像，然后导出 PDF 文件。

我的问题是关于图像加载。我正在这样做：var imageData = getBase64Image('thinking-monkey.jpg');我应该在 base64 中获取 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;变量仍然是未定义的。

我之前尝试过添加一个setTimeout()权利，return dataURL;但它似乎不起作用。

如何等到图像完全加载才能返回 dataURL？

谢谢。

4

2 回答 2

2

您可以使用回调。将图像完全加载后要执行的代码传递给 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") ;
于 2013-09-05T19:38:15.210 回答
0

在 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 */
    }
}
于 2014-04-27T15:11:03.503 回答