Skip to content

Conversation

seekuehe
Copy link

Adds support for blurring images, including an effect to extend the blur beyond the original bounds of the image

There are two blur props applied, one to the image itself in <a:blip> and optionally under <p:spPr> for the bounding shape of the image.

Example

let pptx = new PptxGenJS();
let slide = pptx.addSlide();

slide.addImage({
  x: 1,
  y: 2,
  path: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMTIyMnwwfDF8c2VhcmNofDJ8fGxhbmRzY2FwZXxlbnwwfHx8fDE2NTg5MzE0MDM&ixlib=rb-1.2.1&q=80&w=1080",
    blur: {radius: 20}
});

slide.addImage({
  x: 3,
  y: 2,
  path: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMTIyMnwwfDF8c2VhcmNofDJ8fGxhbmRzY2FwZXxlbnwwfHx8fDE2NTg5MzE0MDM&ixlib=rb-1.2.1&q=80&w=1080",
    blur: {radius: 20, grow: true}
});

pptx.writeFile({ fileName: 'PptxGenJS-Blur.pptx' });

@seekuehe seekuehe self-assigned this Aug 12, 2022
// But should minimize compounding the blur effect on the image
if (imgBlur?.grow) {
imgBlur.radius = valToPts(imgBlur.radius / 10 || 8)
strSlideXml += `<a:blur rad="${imgBlur.radius}" grow="1"/>`
Copy link

@pastafari pastafari Aug 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So if I understand correctly, we apply blur to both <blip> and <effectLst> correct?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the grow effect, yes

Copy link

@pastafari pastafari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on sandbox locally. LGTM! 🎉

@seekuehe seekuehe merged commit 78c31fc into pitch-main Aug 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants