Merge pull request #9197 from nextcloud/fix-avatar-center
Fix avatar generator centering
This commit is contained in:
commit
d82ef72161
|
@ -8,6 +8,7 @@
|
||||||
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
||||||
* @author Thomas Müller <thomas.mueller@tmit.eu>
|
* @author Thomas Müller <thomas.mueller@tmit.eu>
|
||||||
* @author Vincent Petry <pvince81@owncloud.com>
|
* @author Vincent Petry <pvince81@owncloud.com>
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
*
|
*
|
||||||
* @license AGPL-3.0
|
* @license AGPL-3.0
|
||||||
*
|
*
|
||||||
|
@ -41,6 +42,7 @@ use OCP\IL10N;
|
||||||
use OCP\IRequest;
|
use OCP\IRequest;
|
||||||
use OCP\IUserManager;
|
use OCP\IUserManager;
|
||||||
use OCP\IUserSession;
|
use OCP\IUserSession;
|
||||||
|
use OCP\AppFramework\Http\DataResponse;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Class AvatarController
|
* Class AvatarController
|
||||||
|
@ -111,8 +113,6 @@ class AvatarController extends Controller {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @NoAdminRequired
|
* @NoAdminRequired
|
||||||
* @NoCSRFRequired
|
* @NoCSRFRequired
|
||||||
|
@ -124,6 +124,7 @@ class AvatarController extends Controller {
|
||||||
* @return JSONResponse|FileDisplayResponse
|
* @return JSONResponse|FileDisplayResponse
|
||||||
*/
|
*/
|
||||||
public function getAvatar($userId, $size) {
|
public function getAvatar($userId, $size) {
|
||||||
|
// min/max size
|
||||||
if ($size > 2048) {
|
if ($size > 2048) {
|
||||||
$size = 2048;
|
$size = 2048;
|
||||||
} elseif ($size <= 0) {
|
} elseif ($size <= 0) {
|
||||||
|
@ -132,9 +133,11 @@ class AvatarController extends Controller {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
$avatar = $this->avatarManager->getAvatar($userId)->getFile($size);
|
$avatar = $this->avatarManager->getAvatar($userId)->getFile($size);
|
||||||
$resp = new FileDisplayResponse($avatar,
|
$resp = new FileDisplayResponse(
|
||||||
|
$avatar,
|
||||||
Http::STATUS_OK,
|
Http::STATUS_OK,
|
||||||
['Content-Type' => $avatar->getMimeType()]);
|
['Content-Type' => $avatar->getMimeType()
|
||||||
|
]);
|
||||||
} catch (\Exception $e) {
|
} catch (\Exception $e) {
|
||||||
$resp = new Http\Response();
|
$resp = new Http\Response();
|
||||||
$resp->setStatus(Http::STATUS_NOT_FOUND);
|
$resp->setStatus(Http::STATUS_NOT_FOUND);
|
||||||
|
|
|
@ -62,13 +62,16 @@
|
||||||
(function ($) {
|
(function ($) {
|
||||||
|
|
||||||
String.prototype.toRgb = function() {
|
String.prototype.toRgb = function() {
|
||||||
var hash = this.toLowerCase().replace(/[^0-9a-f]+/g, '');
|
// Normalize hash
|
||||||
|
var hash = this.toLowerCase();
|
||||||
|
|
||||||
// Already a md5 hash?
|
// Already a md5 hash?
|
||||||
if( !hash.match(/^[0-9a-f]{32}$/g) ) {
|
if( hash.match(/^([0-9a-f]{4}-?){8}$/) === null ) {
|
||||||
hash = md5(hash);
|
hash = md5(hash);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hash = hash.replace(/[^0-9a-f]/g, '');
|
||||||
|
|
||||||
function Color(r,g,b) {
|
function Color(r,g,b) {
|
||||||
this.r = r;
|
this.r = r;
|
||||||
this.g = g;
|
this.g = g;
|
||||||
|
@ -116,7 +119,7 @@
|
||||||
var result = Array();
|
var result = Array();
|
||||||
|
|
||||||
// Splitting evenly the string
|
// Splitting evenly the string
|
||||||
for (var i in hash) {
|
for (var i=0; i<hash.length; i++) {
|
||||||
// chars in md5 goes up to f, hex:16
|
// chars in md5 goes up to f, hex:16
|
||||||
result.push(parseInt(hash.charAt(i), 16) % 16);
|
result.push(parseInt(hash.charAt(i), 16) % 16);
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
* @author Robin Appelman <robin@icewind.nl>
|
* @author Robin Appelman <robin@icewind.nl>
|
||||||
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
||||||
* @author Thomas Müller <thomas.mueller@tmit.eu>
|
* @author Thomas Müller <thomas.mueller@tmit.eu>
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
*
|
*
|
||||||
* @license AGPL-3.0
|
* @license AGPL-3.0
|
||||||
*
|
*
|
||||||
|
@ -30,7 +31,6 @@
|
||||||
|
|
||||||
namespace OC;
|
namespace OC;
|
||||||
|
|
||||||
use OC\User\User;
|
|
||||||
use OCP\Files\NotFoundException;
|
use OCP\Files\NotFoundException;
|
||||||
use OCP\Files\NotPermittedException;
|
use OCP\Files\NotPermittedException;
|
||||||
use OCP\Files\SimpleFS\ISimpleFile;
|
use OCP\Files\SimpleFS\ISimpleFile;
|
||||||
|
@ -39,8 +39,10 @@ use OCP\IAvatar;
|
||||||
use OCP\IConfig;
|
use OCP\IConfig;
|
||||||
use OCP\IImage;
|
use OCP\IImage;
|
||||||
use OCP\IL10N;
|
use OCP\IL10N;
|
||||||
use OC_Image;
|
|
||||||
use OCP\ILogger;
|
use OCP\ILogger;
|
||||||
|
use OC\User\User;
|
||||||
|
use OC_Image;
|
||||||
|
use Imagick;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This class gets and sets users avatars.
|
* This class gets and sets users avatars.
|
||||||
|
@ -58,6 +60,19 @@ class Avatar implements IAvatar {
|
||||||
/** @var IConfig */
|
/** @var IConfig */
|
||||||
private $config;
|
private $config;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
*
|
||||||
|
* @var string
|
||||||
|
*/
|
||||||
|
private $svgTemplate = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="{size}" height="{size}" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="100%" height="100%" fill="#{fill}"></rect>
|
||||||
|
<text x="50%" y="350" style="font-weight:600;font-size:278px;font-family:\'Open Sans\';text-anchor:middle;fill:#fff">{letter}</text>
|
||||||
|
</svg>';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* constructor
|
* constructor
|
||||||
*
|
*
|
||||||
|
@ -114,7 +129,7 @@ class Avatar implements IAvatar {
|
||||||
*/
|
*/
|
||||||
public function set($data) {
|
public function set($data) {
|
||||||
|
|
||||||
if($data instanceOf IImage) {
|
if ($data instanceof IImage) {
|
||||||
$img = $data;
|
$img = $data;
|
||||||
$data = $img->data();
|
$data = $img->data();
|
||||||
} else {
|
} else {
|
||||||
|
@ -191,7 +206,9 @@ class Avatar implements IAvatar {
|
||||||
try {
|
try {
|
||||||
$ext = $this->getExtension();
|
$ext = $this->getExtension();
|
||||||
} catch (NotFoundException $e) {
|
} catch (NotFoundException $e) {
|
||||||
|
if (!$data = $this->generateAvatarFromSvg(1024)) {
|
||||||
$data = $this->generateAvatar($this->user->getDisplayName(), 1024);
|
$data = $this->generateAvatar($this->user->getDisplayName(), 1024);
|
||||||
|
}
|
||||||
$avatar = $this->folder->newFile('avatar.png');
|
$avatar = $this->folder->newFile('avatar.png');
|
||||||
$avatar->putContent($data);
|
$avatar->putContent($data);
|
||||||
$ext = 'png';
|
$ext = 'png';
|
||||||
|
@ -214,7 +231,9 @@ class Avatar implements IAvatar {
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($this->folder->fileExists('generated')) {
|
if ($this->folder->fileExists('generated')) {
|
||||||
|
if (!$data = $this->generateAvatarFromSvg($size)) {
|
||||||
$data = $this->generateAvatar($this->user->getDisplayName(), $size);
|
$data = $this->generateAvatar($this->user->getDisplayName(), $size);
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$avatar = new OC_Image();
|
$avatar = new OC_Image();
|
||||||
|
@ -259,6 +278,53 @@ class Avatar implements IAvatar {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* {size} = 500
|
||||||
|
* {fill} = hex color to fill
|
||||||
|
* {letter} = Letter to display
|
||||||
|
*
|
||||||
|
* Generate SVG avatar
|
||||||
|
* @return string
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
private function getAvatarVector(int $size): string {
|
||||||
|
$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');
|
||||||
|
|
||||||
|
$toReplace = ['{size}', '{fill}', '{letter}'];
|
||||||
|
return str_replace($toReplace, [$size, $bgHEX, $letter], $this->svgTemplate);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate png avatar from svg with Imagick
|
||||||
|
*
|
||||||
|
* @param int $size
|
||||||
|
* @return string|boolean
|
||||||
|
*/
|
||||||
|
private function generateAvatarFromSvg(int $size) {
|
||||||
|
if (!extension_loaded('imagick')) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
$font = __DIR__ . '/../../core/fonts/OpenSans-Semibold.ttf';
|
||||||
|
$svg = $this->getAvatarVector($size);
|
||||||
|
$avatar = new Imagick();
|
||||||
|
$avatar->setFont($font);
|
||||||
|
$avatar->readImageBlob($svg);
|
||||||
|
$avatar->setImageFormat('png');
|
||||||
|
$image = new OC_Image();
|
||||||
|
$image->loadFromData($avatar);
|
||||||
|
return $image->data();
|
||||||
|
} catch (\Exception $e) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate png avatar with GD
|
||||||
|
*
|
||||||
* @param string $userDisplayName
|
* @param string $userDisplayName
|
||||||
* @param int $size
|
* @param int $size
|
||||||
* @return string
|
* @return string
|
||||||
|
@ -275,12 +341,9 @@ class Avatar implements IAvatar {
|
||||||
$font = __DIR__ . '/../../core/fonts/OpenSans-Semibold.ttf';
|
$font = __DIR__ . '/../../core/fonts/OpenSans-Semibold.ttf';
|
||||||
|
|
||||||
$fontSize = $size * 0.4;
|
$fontSize = $size * 0.4;
|
||||||
$box = imagettfbbox($fontSize, 0, $font, $text);
|
|
||||||
|
|
||||||
$x = ($size - ($box[2] - $box[0])) / 2;
|
list($x, $y) = $this->imageTTFCenter($im, $text, $font, $fontSize);
|
||||||
$y = ($size - ($box[1] - $box[7])) / 2;
|
|
||||||
$x += 1;
|
|
||||||
$y -= $box[7];
|
|
||||||
imagettftext($im, $fontSize, 0, $x, $y, $white, $font, $text);
|
imagettftext($im, $fontSize, 0, $x, $y, $white, $font, $text);
|
||||||
|
|
||||||
ob_start();
|
ob_start();
|
||||||
|
@ -291,6 +354,35 @@ class Avatar implements IAvatar {
|
||||||
return $data;
|
return $data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate real image ttf center
|
||||||
|
*
|
||||||
|
* @param resource $image
|
||||||
|
* @param string $text text string
|
||||||
|
* @param string $font font path
|
||||||
|
* @param int $size font size
|
||||||
|
* @param int $angle
|
||||||
|
* @return Array
|
||||||
|
*/
|
||||||
|
protected function imageTTFCenter($image, string $text, string $font, int $size, $angle = 0): array {
|
||||||
|
// Image width & height
|
||||||
|
$xi = imagesx($image);
|
||||||
|
$yi = imagesy($image);
|
||||||
|
|
||||||
|
// bounding box
|
||||||
|
$box = imagettfbbox($size, $angle, $font, $text);
|
||||||
|
|
||||||
|
// imagettfbbox can return negative int
|
||||||
|
$xr = abs(max($box[2], $box[4]));
|
||||||
|
$yr = abs(max($box[5], $box[7]));
|
||||||
|
|
||||||
|
// calculate bottom left placement
|
||||||
|
$x = intval(($xi - $xr) / 2);
|
||||||
|
$y = intval(($yi + $yr) / 2);
|
||||||
|
|
||||||
|
return array($x, $y);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Calculate steps between two Colors
|
* Calculate steps between two Colors
|
||||||
* @param object Color $steps start color
|
* @param object Color $steps start color
|
||||||
|
@ -304,6 +396,7 @@ class Avatar implements IAvatar {
|
||||||
$step[2] = ($ends[1]->b - $ends[0]->b) / $steps;
|
$step[2] = ($ends[1]->b - $ends[0]->b) / $steps;
|
||||||
return $step;
|
return $step;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Convert a string to an integer evenly
|
* Convert a string to an integer evenly
|
||||||
* @param string $hash the text to parse
|
* @param string $hash the text to parse
|
||||||
|
@ -323,7 +416,6 @@ class Avatar implements IAvatar {
|
||||||
return $palette;
|
return $palette;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Convert a string to an integer evenly
|
* Convert a string to an integer evenly
|
||||||
* @param string $hash the text to parse
|
* @param string $hash the text to parse
|
||||||
|
@ -347,20 +439,26 @@ class Avatar implements IAvatar {
|
||||||
return intval($final % $maximum);
|
return intval($final % $maximum);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param string $text
|
* @param string $hash
|
||||||
* @return Color Object containting r g b int in the range [0, 255]
|
* @return Color Object containting r g b int in the range [0, 255]
|
||||||
*/
|
*/
|
||||||
function avatarBackgroundColor($text) {
|
public function avatarBackgroundColor(string $hash) {
|
||||||
$hash = preg_replace('/[^0-9a-f]+/', '', $text);
|
// Normalize hash
|
||||||
|
$hash = strtolower($hash);
|
||||||
|
|
||||||
|
// Already a md5 hash?
|
||||||
|
if( preg_match('/^([0-9a-f]{4}-?){8}$/', $hash, $matches) !== 1 ) {
|
||||||
$hash = md5($hash);
|
$hash = md5($hash);
|
||||||
$hashChars = str_split($hash);
|
}
|
||||||
|
|
||||||
|
// Remove unwanted char
|
||||||
|
$hash = preg_replace('/[^0-9a-f]+/', '', $hash);
|
||||||
|
|
||||||
$red = new Color(182, 70, 157);
|
$red = new Color(182, 70, 157);
|
||||||
$yellow = new Color(221, 203, 85);
|
$yellow = new Color(221, 203, 85);
|
||||||
$blue = new Color(0, 130, 201); // Nextcloud blue
|
$blue = new Color(0, 130, 201); // Nextcloud blue
|
||||||
|
|
||||||
// Number of steps to go from a color to another
|
// Number of steps to go from a color to another
|
||||||
// 3 colors * 6 will result in 18 generated colors
|
// 3 colors * 6 will result in 18 generated colors
|
||||||
$steps = 6;
|
$steps = 6;
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
* @author Robin Appelman <robin@icewind.nl>
|
* @author Robin Appelman <robin@icewind.nl>
|
||||||
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
||||||
* @author Thomas Müller <thomas.mueller@tmit.eu>
|
* @author Thomas Müller <thomas.mueller@tmit.eu>
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
*
|
*
|
||||||
* @license AGPL-3.0
|
* @license AGPL-3.0
|
||||||
*
|
*
|
||||||
|
@ -26,6 +27,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
namespace OCP;
|
namespace OCP;
|
||||||
|
|
||||||
use OCP\Files\File;
|
use OCP\Files\File;
|
||||||
use OCP\Files\NotFoundException;
|
use OCP\Files\NotFoundException;
|
||||||
|
|
||||||
|
@ -78,6 +80,13 @@ interface IAvatar {
|
||||||
*/
|
*/
|
||||||
public function getFile($size);
|
public function getFile($size);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param string $text
|
||||||
|
* @return Color Object containting r g b int in the range [0, 255]
|
||||||
|
* @since 14.0.0
|
||||||
|
*/
|
||||||
|
public function avatarBackgroundColor(string $text);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle a changed user
|
* Handle a changed user
|
||||||
* @since 13.0.0
|
* @since 13.0.0
|
||||||
|
|
|
@ -48,6 +48,9 @@ class AvatarTest extends \Test\TestCase {
|
||||||
$this->createMock(ILogger::class),
|
$this->createMock(ILogger::class),
|
||||||
$this->config
|
$this->config
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// abcdefghi is a convenient name that our algorithm convert to our nextcloud blue 0082c9
|
||||||
|
$this->user->method('getDisplayName')->willReturn('abcdefghi');
|
||||||
}
|
}
|
||||||
|
|
||||||
public function testGetNoAvatar() {
|
public function testGetNoAvatar() {
|
||||||
|
@ -226,4 +229,37 @@ class AvatarTest extends \Test\TestCase {
|
||||||
$this->avatar->set($image->data());
|
$this->avatar->set($image->data());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function testGenerateSvgAvatar() {
|
||||||
|
$avatar = $this->invokePrivate($this->avatar, 'getAvatarVector', [64]);
|
||||||
|
|
||||||
|
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="64" height="64" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="100%" height="100%" fill="#0082c9"></rect>
|
||||||
|
<text x="50%" y="350" style="font-weight:600;font-size:278px;font-family:\'Open Sans\';text-anchor:middle;fill:#fff">A</text>
|
||||||
|
</svg>';
|
||||||
|
$this->assertEquals($avatar, $svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testHashToInt() {
|
||||||
|
$hashToInt = $this->invokePrivate($this->avatar, 'hashToInt', ['abcdef', 18]);
|
||||||
|
$this->assertTrue(gettype($hashToInt) === 'integer');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testMixPalette() {
|
||||||
|
$colorFrom = new \OC\Color(0,0,0);
|
||||||
|
$colorTo = new \OC\Color(6,12,18);
|
||||||
|
$steps = 6;
|
||||||
|
$palette = $this->invokePrivate($this->avatar, 'mixPalette', [$steps, $colorFrom, $colorTo]);
|
||||||
|
foreach($palette as $j => $color) {
|
||||||
|
// calc increment
|
||||||
|
$incR = $colorTo->r / $steps * $j;
|
||||||
|
$incG = $colorTo->g / $steps * $j;
|
||||||
|
$incB = $colorTo->b / $steps * $j;
|
||||||
|
// ensure everything is equal
|
||||||
|
$this->assertEquals($color, new \OC\Color($incR, $incG,$incB));
|
||||||
|
}
|
||||||
|
$hashToInt = $this->invokePrivate($this->avatar, 'hashToInt', ['abcdef', 18]);
|
||||||
|
$this->assertTrue(gettype($hashToInt) === 'integer');
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue