从上传的图片生成DataURI并添加到PDF (JsPDF)
从上传的图片生成DataURI并添加到PDF (JsPDF)
提问于 2019-09-13 14:42:06
我将图片上传到服务器，然后我的脚本将其转换为数据URI。一切都很好，在setTimeOut函数中，警报显示dataURI很好，但下一行中的addImage函数似乎没有将图片添加到PDF中。最后一行中的addImage函数可以添加另一个图像。
我已经尝试了所有的方法，我不明白为什么setTimeOut块内的addImage函数不能将图像添加到PDF中。
直播版：http://www.course0001.com/fiverr/lifemax/004/
if( document.getElementById("field_file").files.length == 0 ){
doc.addImage(logoData, 'JPEG', 65, 35, 87, 27); // Add logo
} else {
let fnm = $('input[type=file]')[0].files[0].name;
let fileExtension = getExtension(fnm);
var logo = null;
getDataUri('/fiverr/lifemax/004/backend/logos/logo-'+uniqueFileName+'.'+fileExtension, function(dataUri) {
logo = dataUri;
console.log("logo=" + logo);
});
function getDataUri(url, cb)
{
var image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
cb(canvas.toDataURL('image/jpeg'));
};
image.src = url;
}
setTimeout(function(){
alert(logo); // This displays the data URI fine
doc.addImage(logo, 'JPEG', 65, 35, 87, 27); // This never adds the image, however the alert displays the dataURI fine.
}, 3000);
}
doc.addImage(coverData, 'JPEG', 10, 95, 190, 190); // This adds the image just fine. Data URI is stored in a variable as string. 回答 1
Stack Overflow用户
发布于 2019-09-16 14:52:27
jsPDF是一个异步函数，这意味着它不会等待上一组代码完全执行。
当您在"setTimeout“中调用addImage (也会在3000ms后执行，而无需等待依赖项完全加载)时，徽标可能尚未呈现。因此，白色图像。
但在"coverData“完全呈现之前，下一行代码不会执行，因此您可以在PDF上看到它。
你可以尝试使用下面的代码来实现同步。
if( document.getElementById("field_file").files.length == 0 ){
doc.addImage(logoData, 'JPEG', 65, 35, 87, 27); // Add logo
} else {
let fnm = $('input[type=file]')[0].files[0].name;
let fileExtension = getExtension(fnm);
var logo = null;
getDataUri('/fiverr/lifemax/004/backend/logos/logo-'+uniqueFileName+'.'+fileExtension, function(dataUri) {
logo = dataUri;
console.log("logo=" + logo);
setLogo(logo);
});
function getDataUri(url, cb)
{
var image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
cb(canvas.toDataURL('image/jpeg'));
};
image.src = url;
}
function setLogo(logo){
alert(logo); // This displays the data URI fine
doc.addImage(logo, 'JPEG', 65, 35, 87, 27); // This never adds the image, however the alert displays the dataURI fine.
};
}
doc.addImage(coverData, 'JPEG', 10, 95, 190, 190); // This adds the image just fine. Data URI is stored in a variable as string.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57918508
复制相关文章
相似问题
腾讯云开发者
