Transparent images.

[alex-griffiths]

I wasn't sure if I should make a new issue for this, or include it in the 1.0.0 issue. Sorry if this is the wrong spot.

Anyway, I have a png image with a transparent background that shows as transparent as the application icon, and anywhere else I use it, with the exception of this splash screen. Instead it shows the transparent layer with the white/gray grid you see in photoshop.

Do you have any idea why that might be the case?

My splashscreen options: splashScreenOpts: { width: 256, height: 256, transparent: true }

[trodi]

This is the perfect location to post your issue!

Interesting. The example in this project uses an image with a transparent background, which you can see displays as expected. If you point to my example svg img in your project, do you correctly see the transparency? Also what version of electron are you using?

[Tommatheussen]

I am encountering the same issue. Using the latest version of electron (1.8.4). After converting my .png to a .svg format, it works correctly (although I got some size issues atm). Same behaviour occurs when using .ico file (which also has the transparent background)

[trodi]

On a Mac, I just tested a png with a transparent background using electron v1.8.4 and had no issue. I just pushed a temporary branch which uses a png version of my icon when running npm run example-dynamic, in case you want to see if your code is any different and if it works in your environment.

This issue is likely not an issue with this module. It isn't doing anything special for transparency, all the options are just given to electron to do the heavy lifting. For reference, transparent windows have limitations.

[Tommatheussen]

Thanks for the example, I just tested this on my mac (haven't tried windows, can try later today), and indeed, the dynamic one works. However, if you load the png directly in the simple splash screen as file instead of the svg, it does not work properly. I guess this is due to how electron shows the loaded template. I will adjust my application tonight to try the dynamic splash screen.

[trodi]

@Tommatheussen , To be clear, it doesn't matter if you use initSplashScreen or initDynamicSplashScreen, rather it depends on the templateUrl that's given. Pointing directly to an SVG will work because how SVG work, but if you have an image like a PNG, you'll have to embed it in an HTML file. My dynamic example already had this setup so that's what I used in that branch. I'll see if I can improve my doc verbiage on this parameter.

I've thought about adding a convenience option where you provide the image instead of the templateUrl and I wrap the image in an html file for you...

For reference, this is what I'm doing with the parameter:

splashScreen.loadURL(`file://${xConfig.templateUrl}`);

[alex-griffiths]

So I just tested an SVG on Electron 1.8.2 (I would assume it works on 1.8.4), and it works nicely.

mainWindow = Splashscreen.initSplashScreen({
    windowOpts: windowOptions,
    templateUrl: path.join(__dirname, 'assets/icons/win/', 'icon.svg'),
    delay: 0,
    minVisible: 1500,
    splashScreenOpts: {
      width: 256,
      height: 256,
      transparent: true
    }
  })

PNG still isn't working correctly.

On 1.8.4 the PNG still doesn't work as expected, while the SVG does.

@trodi I'll try run your repo on my computer to see how it behaves.

[trodi]

@Xadren , if you are simply setting the templateUrl to a path to a PNG file, it won't work. templateUrl must point to an HTML (or SVG) file to work properly.

Pointing directly to an SVG will work because how SVG work, but if you have an image like a PNG, you'll have to embed it in an HTML file.

I've thought about adding a convenience option where you provide the image instead of the templateUrl and I wrap the image in an html file for you...

[alex-griffiths]

@trodi that makes sense. You've mentioned you thought about adding a convenience option for PNGs where you would wrap the image in an html file. That sounds like a good idea, but perhaps until that is implemented, there should be some info in the README that informs other users about the behaviour of PNGs vs SVGs - I think you mentioned doing something similar in one of your comments above.

At which point, this issue could probably be closed.

[trodi]

@Xadren , I've updated the API docs API docs to further explain that an HTML file expected and to wrap a PNG.

Therefore I'll close this issue.

I mentioned the convenience option mainly to get feedback on whether if was worth doing / helpful. If you or others would like it, I'll happily add it.

[alex-griffiths]

I think it would be worthwhile adding the support for different file types that support transparency.