javascript jsPDF 和图片加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18485271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jsPDF and image loading
提问by gael
I'm tryna use the jsPDF library. I'd like to load and insert an image, and export the PDF file.
我正在尝试使用 jsPDF 库。我想加载和插入图像，然后导出 PDF 文件。
My issue is about the image loading. I'm doing this: var imageData = getBase64Image('thinking-monkey.jpg');and I should get the dataURL in base64 inside imageData.
我的问题是关于图像加载。我正在这样做：var imageData = getBase64Image('thinking-monkey.jpg');我应该在 base64 中获取 dataURL imageData。
My getBase64Image()function does the following:
我的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;
}
But it returns 'undefined', because the image is like 65 Kb and doesn't load up at once. So when at return dataURL;the variable is still undefined.
但它返回“未定义”，因为图像大小为 65 Kb，并且不会立即加载。所以当return dataURL;变量仍然未定义时。
I've tried to add a setTimeout()right before return dataURL;but it doesn't seem to be working.
我之前尝试过添加setTimeout()权限，return dataURL;但似乎不起作用。
How can I wait until the image is fully loaded to return dataURL?
如何等到图像完全加载才能返回 dataURL？
Thanks.
谢谢。
回答by rowasc
You can use a callback. Pass the code that you want to execute after the image is fully loaded to the getBase64Image function, and execute it in the .onLoad function.
您可以使用回调。将图片加载完毕后要执行的代码传递给getBase64Image函数，在.onLoad函数中执行。
it would be something like this. (generatePdf is a function)
它会是这样的。（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") ;
回答by TheRealPapa
Move the "return" statement inside the img.onload function, this should do it I suspect.
在 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 */
}
}
