Improve support for transparent and non-rectangle images, icons, and emoji's

[sambouwer]

Is your feature request related to a problem? Please describe.
There are several bug reports on how Anytype deals with transparent images:

• Mobile - Problem with transparent PNG icon
• White background when using transparent profile icon - #4 by Oshyan

There are also several feature requests to improve how Anytype deals with transparent and non-rectangular images:

• Using images as icons with transparent background
• Remove Background Colour On PNG Icons Emojis
• Transparent PNG Page Icon Addition

Describe the solution you’d like
I think we can resolve all submitted bugs and combine all feature requests if we ask the Anytype team to:

• Allow the user to choose between no background or a background color (of choice) for any image
• Allow the user to choose a background style/shape (square, rounded square, squircle, or circle)
• For bonus points: allow to differentiate the color for light vs darkmode

The scope of this feature request is “any image”:

• Image on a canvas/in a block
• Cover image of an object
• Object icon

Describe alternatives you’ve considered
None yet

Additional context
Maybe this can be extended to be allowed for any object, like requested here:

Please Allow Editing the Page Object's Background Color

Currently, the background color for a page is a whitish color, which can be harsh for those who are light sensitive. I use a setting called Force Dark mode on my android device which changes the background color and I found it quite nice. Here is a screenshot of what it looks like: [image] Keeping in mind that an app-wide dark mode could be more difficult to implement currently, I’d like to request the ability to set the background color of a page object on both the desktop and android apps.…

[Bred]

Is your feature request related to a problem? Please describe.
Please allow for the removal of the background colour on transparent icons on pages. I find it very inconsistent with the page when the thing that should be transparent acts like a fake png, with a colour I didn’t want behind it.

Describe the solution you’d like
Allow the removal of the default background colour when using transparent images/emojis. Such as Notion’s design.

Describe alternatives you’ve considered
Having to add background colours to pngs to match that of anytype backgrounds. Which will take… hours

Additional context

[Eban]

Hi, I have this weird blue background behind my profile picture, I’m running Anytype 0.1.11 on Android 10

[Kirill_Lem]

@Eban Hi! Sorry for the long aswer. Please, send the original picture, it helps us to understand why it happend

[Eban]

Hi, here is the image https://community.anytype.io/assets/avatars/cd42gqU0hgDCX6tg.png it’s just a transparent PNG.

[Eban]

[div3xi]

That is just the background colour the devs have selected for profile icon, it would become transparent in the future.

[Kirill_Lem]

@Eban Hi! Please, describe the problem in detail.

[Oshyan]

@Kirill_Lem I believe they are using an image with transparency for their profile pic. The white in the image they attached should be “transparent”, and I think they expect that the background (blue-green “fibers” in this case) would show through instead of a white background in an oval.

[Eban]

Exactly !

[Kirill_Lem]

@Oshyan Thank you for the clarification!

[Kirill_Lem]

@Eban Thank you for your notice! We haven’t implemented this yet, but plan to do that in the future

[k.and]

I believe this issue is still ongoing.

When I add an icon with a transparent background sometimes I get this result (which is expected):

But sometimes it appears like that:

Please bring some consistency to how icons with transparent background are processed.