Merge pull request #556 from marp-team/enable-png-transparency

Enable PNG image transparency
marp-team · Oct 28, 2023 · d0520cc · d0520cc
2 parents a82d8f5 + 3b8eb38
commit d0520cc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,10 @@
 - Upgrade Marp Core to [v3.9.0](https://github.com/marp-team/marp-core/releases/v3.9.0) ([#557](https://github.com/marp-team/marp-cli/pull/557))
 - Upgrade dependent packages to the latest versions ([#557](https://github.com/marp-team/marp-cli/pull/557))
 
+### Fixed
+
+- Enable PNG image transparency ([#555](https://github.com/marp-team/marp-cli/issues/555), [#556](https://github.com/marp-team/marp-cli/pull/556))
+
 ## v3.3.1 - 2023-10-01
 
 ### Fixed

diff --git a/src/converter.ts b/src/converter.ts
@@ -392,6 +392,13 @@ export class Converter {
       await render()
       await page.emulateMediaType('print')
 
+      if (opts.type === ConvertType.png) {
+        // Enable transparency
+        await page.addStyleTag({
+          content: ':root,body { background:transparent !important; }',
+        })
+      }
+
       const screenshot = async (pageNumber = 1) => {
         const clip = {
           x: 0,
@@ -406,7 +413,11 @@ export class Converter {
             type: 'jpeg',
           })
 
-        return await page.screenshot({ clip, type: 'png' })
+        return await page.screenshot({
+          clip,
+          omitBackground: true,
+          type: 'png',
+        })
       }
 
       if (opts.pages) {