[Bug]: Theming: touchIcon-core aspect ratio incorrect - only square logo rendered correctly

[bentuna]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
• Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• I agree to follow Nextcloud's Code of Conduct.

Bug description

The image rendered under /apps/theming/icon does not consider the original aspect ratio of an uploaded logo. It makes it square.

Steps to reproduce

1. Go to https://yournextcloud.com/settings/admin/theming and upload a non-square image under Logo
2. See that the generated image under https://yournextcloud.com/apps/theming/icon is deformed:

Expected behavior

The generated image should keep the aspect ratio of the original logo and scale it propotionally.

Nextcloud Server version

30

Operating system

None

PHP engine version

None

Web server

None

Database engine version

None

Is this bug present after an update or on a fresh install?

None

Are you using the Nextcloud Server Encryption module?

None

What user-backends are you using?

• Default user-backend (database)
• LDAP/ Active Directory
• SSO - SAML
• Other

Configuration report

List of activated Apps

Nextcloud Signing status

Nextcloud Logs

Additional info

No response

[bentuna]

Btw, this happens to the default Nextcloud logo as well:

[fpfuetsch]

Can confirm this with version 31.0.10, is there any way to reset the icons?

[come-nc]

Hello,

I can reproduce this on some computers and not on others. I’m trying to pinpoint the source of the issue.

Test code:

<?php

	function renderAppIcon($app, $size) {
		$color = 'blue';
		$appIconContent = '<svg width="256" height="128" version="1.1" viewBox="0 0 256 128" xmlns="http://www.w3.org/2000/svg"><path d="m128 7c-25.871 0-47.817 17.485-54.713 41.209-5.9795-12.461-18.642-21.209-33.287-21.209-20.304 0-37 16.696-37 37s16.696 37 37 37c14.645 0 27.308-8.7481 33.287-21.209 6.8957 23.724 28.842 41.209 54.713 41.209s47.817-17.485 54.713-41.209c5.9795 12.461 18.642 21.209 33.287 21.209 20.304 0 37-16.696 37-37s-16.696-37-37-37c-14.645 0-27.308 8.7481-33.287 21.209-6.8957-23.724-28.842-41.209-54.713-41.209zm0 22c19.46 0 35 15.54 35 35s-15.54 35-35 35-35-15.54-35-35 15.54-35 35-35zm-88 20c8.4146 0 15 6.5854 15 15s-6.5854 15-15 15-15-6.5854-15-15 6.5854-15 15-15zm176 0c8.4146 0 15 6.5854 15 15s-6.5854 15-15 15-15-6.5854-15-15 6.5854-15 15-15z" color="#000000" fill="#fff" style="-inkscape-stroke:none"/></svg>';
		$mime = 'image/svg+xml';
		// generate background image with rounded corners
		$cornerRadius = 0.2 * $size;
		$background = '<?xml version="1.0" encoding="UTF-8"?>'
			. '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" width="' . $size . '" height="' . $size . '" xmlns:xlink="http://www.w3.org/1999/xlink">'
			. '<rect x="0" y="0" rx="' . $cornerRadius . '" ry="' . $cornerRadius . '" width="' . $size . '" height="' . $size . '" style="fill:' . $color . ';" />'
			. '</svg>';
		// resize svg magic as this seems broken in Imagemagick
		if ($mime === 'image/svg+xml' || substr($appIconContent, 0, 4) === '<svg') {
			if (substr($appIconContent, 0, 5) !== '<?xml') {
				$svg = '<?xml version="1.0"?>' . $appIconContent;
			} else {
				$svg = $appIconContent;
			}
			$tmp = new Imagick();
			$tmp->setBackgroundColor(new ImagickPixel('transparent'));
			$tmp->setResolution(72, 72);
			$tmp->readImageBlob($svg);
			$x = $tmp->getImageWidth();
			$y = $tmp->getImageHeight();
			$tmp->destroy();

			// convert svg to resized image
			$appIconFile = new Imagick();
			$resX = (int)(72 * $size / $x);
			$resY = (int)(72 * $size / $y);
			$appIconFile->setResolution($resX, $resY);
			$appIconFile->setBackgroundColor(new ImagickPixel('transparent'));
			$appIconFile->readImageBlob($svg);
		} else {
			$appIconFile = new Imagick();
			$appIconFile->setBackgroundColor(new ImagickPixel('transparent'));
			$appIconFile->readImageBlob($appIconContent);
		}
		// offset for icon positioning
		$padding = 0.15;
		$border_w = (int)($appIconFile->getImageWidth() * $padding);
		$border_h = (int)($appIconFile->getImageHeight() * $padding);
		$innerWidth = ($appIconFile->getImageWidth() - $border_w * 2);
		$innerHeight = ($appIconFile->getImageHeight() - $border_h * 2);
		$appIconFile->adaptiveResizeImage($innerWidth, $innerHeight);
		// center icon
		$offset_w = (int)($size / 2 - $innerWidth / 2);
		$offset_h = (int)($size / 2 - $innerHeight / 2);

		$finalIconFile = new Imagick();
		$finalIconFile->setBackgroundColor(new ImagickPixel('transparent'));
		$finalIconFile->readImageBlob($background);
		$finalIconFile->setImageVirtualPixelMethod(Imagick::VIRTUALPIXELMETHOD_TRANSPARENT);
		$finalIconFile->setImageArtifact('compose:args', '1,0,-0.5,0.5');
		$finalIconFile->compositeImage($appIconFile, Imagick::COMPOSITE_ATOP, $offset_w, $offset_h);
		$finalIconFile->setImageFormat('png24');
		if (defined('Imagick::INTERPOLATE_BICUBIC') === true) {
			$filter = Imagick::INTERPOLATE_BICUBIC;
		} else {
			$filter = Imagick::FILTER_LANCZOS;
		}
		$finalIconFile->resizeImage($size, $size, $filter, 1, false);

		$appIconFile->destroy();
		return $finalIconFile;
	}

	echo renderAppIcon('',512);

You can save this in a php file, then run it from cli and save the output in a png file. Then check if the ratio of the logo in the png is correct or not.
On a PC with the issue, I have Imagick compiled with ImageMagick version => ImageMagick 6.9.12-98 Q16 x86_64 18038 https://legacy.imagemagick.org in phpinfo, while on a PC with incorrect ratio I have Imagick compiled with ImageMagick version => ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org. Not sure yet if this is related.