Comments (6)
@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!
from node-pptx.
@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?
from node-pptx.
@KieweRon ok to close this issue?
from node-pptx.
from node-pptx.
from node-pptx.
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,
});
});
});
});
from node-pptx.
Related Issues (20)
- Extract presenter notes?
- Project status HOT 2
- Is it possible to center an image? HOT 1
- Is it possible to duplicate a slide?
- Is it possible to merge two pptx files? HOT 2
- Is there any way to get Slide from one pptx and add it to the current pptx?
- TypeScript definitions? HOT 4
- Would you accept a PR to allow loading pptx from buffer OR file path? HOT 2
- Is it possible to edit an existing Text Box? HOT 2
- Problems calling the library front next.js HOT 1
- is there any props to make text read only?
- Is it possible to save slides as images using node-pptx?
- Trying to integrate with this from my electron app with vue HOT 1
- Convert to Typescript HOT 3
- Allow passing an image name when adding to Slide
- Removing slide doesn't remove slides from [Content_Types].xml
- Insert Attachment (doc, xlsx... ) to Power point
- Option to apply styles to part of text
- npm package not updated? HOT 2
- issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-pptx.