Black border generated around logo

[WillyRamirez]

Hi, when I upload a 4096x4096 png with a background color and a logo on it. The logo contains no border. Then when I generate both Android or iOS splash screens, a black border is shown around the logo.

[webprofusion-chrisc]

Hi Willy,

Splashscreens are bordered using the sampled top left color, this depends on whats required to preserve the aspect ratio of the source image but keep the overall image to the required splashcreen size.

When you select your splashscreen image the sample color preview box should update to show what color the background fill is going to be.

If that's not working, check your spashscreen image doesn't have transparency otherwise let me know what browser/version/os you're using.

[WillyRamirez]

@webprofusion-chrisc thanks Chris, appreciate your help. The preview box shows the correct color. I also made sure my png is not transparent. Maybe I should explain myself better. My logo is 3 letters, and all 3 letters seem to have a border around them.

I am on a MacBook Pro
using google chrome Version 75.0.3770.100 (Official Build) (64-bit)

[webprofusion-chrisc]

Hi, can you provide a source file as an example? Note that all we are really doing is filling a rectangle with the sample colour, then drawing the resized image on top. I can't tell if you mean the coloured background or the black outline round the letter (or the red blob, both of which I assume are in your source image)? If you don't mean the coloured background I'd try resizing your image manually then compare the results.

[WillyRamirez]

@webprofusion-chrisc im referring to the black outline that is placed around my letters, it's not there in the source file. How would you like me to provide you with the source image?

[dave-buzzy]

@webprofusion-chrisc @WillyRamirez Did this ever get addressed? Am seeing the same thing, and can't use the generated images because of this.

[webprofusion-chrisc]

@dave-buzzy no, when resizing we use a library called pica that does the image manipulation work. Does the artifact you're seeing still show up if you use the pica demo? If so, there's nothing I can change in apetools: http://nodeca.github.io/pica/demo/

[dave-buzzy]

@webprofusion-chrisc just tried it in the pica demo. Leaving their default settings untouched, the artefact still shows up. I can remove it by either decreasing the unsharp amount setting to 0, or increasing the unsharp threshold. So it looks like pica's default settings are fairly aggressive in applying unsharp - when you use the library, do you simply use the defaults, or configure your own settings?

In terms of image types, it's most noticeable when using something simple like a single colour, moderately pale logo or text on a white background (eg using a very dark or black logo, you wouldn't really notice a dark border - but it stands out when using something mid-range like gold, aqua, turquoise etc on white).

[webprofusion-chrisc]

@dave-buzzy thanks! I actually do specify a value for unsharp, probably copied from some example code somewhere https://github.com/webprofusion/apetools/blob/master/src/components/tools/tools.ts#L214

[dave-buzzy]

@webprofusion-chrisc Yep, looks like your values (unsharpAmount: 80, unsharpRadius: 0.6, unsharpThreshold: 2,) are what pica has on their demo and docs as recommended default starting points.

Guess it's a use-case decision for you, really - unsharp has its uses, especially resizing photographic-type imagery where a bunch of mid-tone detail etc might get blurred or lost as it resizes, but it can lead to harsh edges and artefacts in imagery with simple, high contrast edges (ie text, icons). What type of imagery are most people processing via apetools for their splash screens etc?

[webprofusion-chrisc]

Yeah it would ideally be adjustable in the interface with some sort of preview. The interface has already gotten into a bit of a mess so really it needs reorganised, maybe a project for someone else!