Text over image about node-pptx HOT 6 CLOSED

@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.