Return Svg avatars

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

core/Controller/AvatarController.php

@@ -41,6 +41,7 @@ use OCP\IL10N;
 use OCP\IRequest;
 use OCP\IUserManager;
 use OCP\IUserSession;
+use OCP\AppFramework\Http\DataResponse;
 
 /**
  * Class AvatarController
@@ -113,6 +114,20 @@ class AvatarController extends Controller {
 
 
 
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 * @NoSameSiteCookieRequired
+	 * @PublicPage
+	 * 
+	 * Shortcut to getAvatar
+	 */
+	public function getAvatarPng($userId, $size) {
+		return $this->getAvatar($userId, $size, true);
+	}
+
+
 	/**
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
@@ -121,25 +136,38 @@ class AvatarController extends Controller {
 	 *
 	 * @param string $userId
 	 * @param int $size
+	 * @param bool $png return png or not
 	 * @return JSONResponse|FileDisplayResponse
 	 */
-	public function getAvatar($userId, $size) {
+	public function getAvatar($userId, $size, bool $png = false) {
 		if ($size > 2048) {
 			$size = 2048;
 		} elseif ($size <= 0) {
 			$size = 64;
 		}
 
+		if ($png === false) {
+			$avatar = $this->avatarManager->getAvatar($userId)->getAvatarVector($size);
+			$resp = new DataDisplayResponse(
+				$avatar,
+				Http::STATUS_OK,
+				['Content-Type' => 'image/svg+xml'
+			]);
+		} else {
+
 			try {
 				$avatar = $this->avatarManager->getAvatar($userId)->getFile($size);
-			$resp = new FileDisplayResponse($avatar,
+				$resp = new FileDisplayResponse(
+					$avatar,
 					Http::STATUS_OK,
-				['Content-Type' => $avatar->getMimeType()]);
+					['Content-Type' => $avatar->getMimeType()
+				]);
 			} catch (\Exception $e) {
 				$resp = new Http\Response();
 				$resp->setStatus(Http::STATUS_NOT_FOUND);
 				return $resp;
 			}
+		}
 
 		// Cache for 30 minutes
 		$resp->cacheFor(1800);

core/routes.php

@@ -42,6 +42,7 @@ $application->registerRoutes($this, [
 		['name' => 'lost#setPassword', 'url' => '/lostpassword/set/{token}/{userId}', 'verb' => 'POST'],
 		['name' => 'user#getDisplayNames', 'url' => '/displaynames', 'verb' => 'POST'],
 		['name' => 'avatar#getAvatar', 'url' => '/avatar/{userId}/{size}', 'verb' => 'GET'],
+		['name' => 'avatar#getAvatarPng', 'url' => '/avatar/{userId}/{size}/png', 'verb' => 'GET'],
 		['name' => 'avatar#deleteAvatar', 'url' => '/avatar/', 'verb' => 'DELETE'],
 		['name' => 'avatar#postCroppedAvatar', 'url' => '/avatar/cropped', 'verb' => 'POST'],
 		['name' => 'avatar#getTmpAvatar', 'url' => '/avatar/tmp', 'verb' => 'GET'],

lib/private/Avatar.php

@@ -30,7 +30,6 @@
 
 namespace OC;
 
-use OC\User\User;
 use OCP\Files\NotFoundException;
 use OCP\Files\NotPermittedException;
 use OCP\Files\SimpleFS\ISimpleFile;
@@ -39,8 +38,9 @@ use OCP\IAvatar;
 use OCP\IConfig;
 use OCP\IImage;
 use OCP\IL10N;
-use OC_Image;
 use OCP\ILogger;
+use OC\User\User;
+use OC_Image;
 
 /**
  * This class gets and sets users avatars.
@@ -57,6 +57,12 @@ class Avatar implements IAvatar {
 	private $logger;
 	/** @var IConfig */
 	private $config;
+	/** @var string */
+	private $svgTemplate = '
+		<svg width="{size}" height="{size}" version="1.1" viewBox="0 0 {size} {size}" xmlns="http://www.w3.org/2000/svg">
+			<rect width="100%" height="100%" fill="#{fill}"></rect>
+			<text x="50%" y="{y}" style="font-weight:600;font-size:{font}px;font-family:\'Open Sans\';text-anchor:middle;fill:#fff">{letter}</text>
+		</svg>';
 
 	/**
 	 * constructor
@@ -114,7 +120,7 @@ class Avatar implements IAvatar {
 	 */
 	public function set($data) {
 
-		if($data instanceOf IImage) {
+		if ($data instanceof IImage) {
 			$img = $data;
 			$data = $img->data();
 		} else {
@@ -258,6 +264,35 @@ class Avatar implements IAvatar {
 		throw new NotFoundException;
 	}
 	
+	/**
+	 * https://github.com/sebdesign/cap-height -- for 500px height
+	 * Open Sans cap-height is 0.72 and we want a 200px caps height size (0.4 letter-to-total-height ratio, 500*0.4=200). 200/0.72 = 278px.
+	 * Since we start from the baseline (text-anchor) we need to shift the y axis by 100px (half the caps height): 500/2+100=350 -->
+	 * {size} = 500
+	 * {fill} = hex color to fill
+	 * {y} = top to bottom baseline text-anchor y position
+	 * {font} = font size
+	 * {letter} = Letter to display
+	 * 
+	 * Generate SVG avatar
+	 * @return string
+	 * 
+	 */
+	public function getAvatarVector($size) {
+		$userDisplayName = $this->user->getDisplayName();
+
+		$bgRGB = $this->avatarBackgroundColor($userDisplayName);
+		$bgHEX = sprintf("%02x%02x%02x", $bgRGB->r, $bgRGB->g, $bgRGB->b);
+
+		$letter = mb_strtoupper(mb_substr($userDisplayName, 0, 1), 'UTF-8');
+		$font = round($size * 0.4);
+		$fontSize = round($font / 0.72);
+		$y = round($size/2 + $font/2);
+		$toReplace = ['{size}', '{fill}', '{y}', '{font}', '{letter}'];
+
+		return str_replace($toReplace, [$size, $bgHEX, $y, $fontSize, $letter], $this->svgTemplate);
+	}
+
 	/**
 	 * @param string $userDisplayName
 	 * @param int $size
@@ -298,7 +333,7 @@ class Avatar implements IAvatar {
 	 * @param int $angle
 	 * @return Array
 	 */
-	protected function imageTTFCenter($image, string $text, string $font, int $size, $angle = 0): Array {
+	protected function imageTTFCenter($image, string $text, string $font, int $size, $angle = 0): array {
 		// Image width & height
 		$xi = imagesx($image);
 		$yi = imagesy($image);
@@ -330,6 +365,7 @@ class Avatar implements IAvatar {
 		$step[2] = ($ends[1]->b - $ends[0]->b) / $steps;
 		return $step;
 	}
+
 	/**
 	 * Convert a string to an integer evenly
 	 * @param string $hash the text to parse
@@ -349,7 +385,6 @@ class Avatar implements IAvatar {
 		return $palette;
 	}
 
-
 	/**
 	 * Convert a string to an integer evenly
 	 * @param string $hash the text to parse
@@ -373,12 +408,11 @@ class Avatar implements IAvatar {
 		return intval($final % $maximum);
 	}
 
-
 	/**
 	 * @param string $text
 	 * @return Color Object containting r g b int in the range [0, 255]
 	 */
-	function avatarBackgroundColor($text) {
+	public function avatarBackgroundColor($text) {
 		$hash = preg_replace('/[^0-9a-f]+/', '', $text);
 
 		$hash = md5($hash);
@@ -387,6 +421,7 @@ class Avatar implements IAvatar {
 		$red = new Color(182, 70, 157);
 		$yellow = new Color(221, 203, 85);
 		$blue = new Color(0, 130, 201); // Nextcloud blue
+
 		// Number of steps to go from a color to another
 		// 3 colors * 6 will result in 18 generated colors
 		$steps = 6;