Text over image
KieweRon opened this issue · comments
Hey,
I've been using the library for a week now, so far I haven't had any problems and a really good library!
I encountered the first problem when trying to add an image that will serve as a background to the text and I can't do it.
I manage to add text over text and add image over image.
But I can't add text over a picture.
I tried to create the image first and then the text and vice versa, but always the image is before the text. Am I missing something? Or is there really a problem with that?
Maybe there is another way to do it?
Many thanks in advance,
Example to my code:
slide.addText(text => {
text
.value("text")
.textColor("ffffff")
.backgroundColor("000000")
.x(0)
.cx(SlideSettings.headerSettings.width)
.y(0)
.cy(SlideSettings.headerSettings.height)
.textVerticalAlign("center")
.textAlign("center");
});
// Add background image
slide.addImage(image => {
image
.data(base64_encode(`D:/projects/PowerPoint generator/Public/Images/Gradiant3.png`))
.x(0)
.cx(SlideSettings.headerSettings.width)
.y(-2)
.cy(SlideSettings.headerSettings.height + 5);
});
// Add tag image
slide.addImage(image => {
image
.data(base64_encode('D:/projects/PowerPoint generator/Public/Images/a_tag.png'))
.x(0)
.cx(SlideSettings.tagSettings.width)
.y(-2)
.cy(SlideSettings.tagSettings.height);
});
// Add tag image
slide.addImage(image => {
image
.data(base64_encode('D:/projects/PowerPoint generator/Public/Images/b_tag.png'))
.x(SlideSettings.headerSettings.width - SlideSettings.tagSettings.width - 10)
.cx(SlideSettings.tagSettings.width)
.y(5)
.cy(SlideSettings.tagSettings.height);
});
Ron
@KieweRon Sounds to me like a sync vs. async problem (addText is synchronous always, but addImage is async due to the fact that it's working with file system calls). I noticed you don't "await" on your addImage() calls, so I think when you were calling addImage() first, and then addText() (which should result in the image being in the background and text on top, like you want), the addImage() calls were fired off asynchronously, and addText() fired synchronously. So node probably finished executing addText() first (since it probably didn't hit an idle point yet, and therefore addImage() was still in the async background queue), and when your code exited, then node hit idle and saw it had addImage() calls pending execution, and therefore executed them. So no matter the physical order of addText() vs. addImage() calls in your code, addText() is always executed first resulting in text behind images.
So try adding "await" to the addImage() calls, and call them before addText() - then it will force node to execute addImage and complete it before moving on to addText().
While I haven't actually tested this theory, I'm 99% sure that's what's happening. Try my suggestion in your code, and let me know if it works.
Hope this helps!
@KieweRon ok to close this issue?
@KieweRon Sounds to me like a sync vs. async problem (addText is synchronous always, but addImage is async due to the fact that it's working with file system calls). I noticed you don't "await" on your addImage() calls, so I think when you were calling addImage() first, and then addText() (which should result in the image being in the background and text on top, like you want), the addImage() calls were fired off asynchronously, and addText() fired synchronously. So node probably finished executing addText() first (since it probably didn't hit an idle point yet, and therefore addImage() was still in the async background queue), and when your code exited, then node hit idle and saw it had addImage() calls pending execution, and therefore executed them. So no matter the physical order of addText() vs. addImage() calls in your code, addText() is always executed first resulting in text behind images.
So try adding "await" to the addImage() calls, and call them before addText() - then it will force node to execute addImage and complete it before moving on to addText().
While I haven't actually tested this theory, I'm 99% sure that's what's happening. Try my suggestion in your code, and let me know if it works.
Hope this helps!
Hi, I've tried this solution and it didnt work for me. It's the same code as @KieweRon wrote and the same problem, Do you have any idea what can i do?
First things first, AMAZING LIBRARY!! It solved a need and is super easy to use. A great big THANK YOU to the developers.
With that said, I'm having the same issue that @warrior001 is having. Is there a fix?
The text that I add at the bottom (date, copyright, page number) shows up behind the footer image, no matter what I do. I've tried adding async/await, using the different add methods, but to no avail.
Any help would be greatly appreciated:
await pptx.compose(async (pres) => {
await asyncForEach(items, async (item, index) => {
await pres.addSlide(async (slide) => {
// title background shape
await slide.addShape((shape) => {
shape
.type(PPTX.ShapeTypes.RECTANGLE)
.x(0)
.y(43)
.cx(720)
.cy(42)
.color("319BDD");
});
await slide.addImage((image) => {
image
.data(item.image)
.x(18)
.y(180)
.cx(648)
.cy(300);
});
// header background
await slide.addImage((image) => {
image
.src(HEADER_IMAGE)
.href(SLIDE_HREF)
.x(0)
.y(0)
.cx(720);
});
// biis logo
await slide.addImage((image) => {
image
.src(LOGO_IMAGE)
.href(SLIDE_HREF)
.x(2)
.y(7)
.cx(414);
});
// footer background
await slide.addImage({
src: FOOTER_IMAGE,
href: SLIDE_HREF,
x: 0,
y: 501,
cx: 720,
});
// title
await slide.addText({
value: item.title,
x: 0,
y: 49,
textWrap: "none",
cx: 720,
fontSize: 32,
textColor: "FFFFFF",
});
// description
await slide.addText({
value: item.subheader,
x: 18,
y: 131,
cx: 684,
textAlign: "left",
});
// date
await slide.addText({
value: dayjs().format("MM/DD/YY"),
x: 36,
y: 505,
cx: 167,
cy: 28,
textColor: "FFFFFF",
textAlign: "left",
fontSize: 12,
});
// copyright
await slide.addText({
value: "© NBOA 2021",
x: 246,
y: 505,
cx: 228,
cy: 28,
textColor: "FFFFFF",
textAlign: "center",
fontSize: 12,
});
// page number
await slide.addText({
value: `${index + 1}`,
x: 531,
y: 505,
cx: 167,
cy: 28,
textColor: "FFFFFF",
textAlign: "right",
fontSize: 12,
});
});
});
});