Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Center text? #11

Open
HsRealDev opened this issue Oct 17, 2017 · 11 comments
Open

Center text? #11

HsRealDev opened this issue Oct 17, 2017 · 11 comments
Assignees

Comments

@HsRealDev
Copy link

Hi,

sorry, my OCD is bugging me again.

Could it be possible to center the text on the image?

Example of an avatar where text is not in aligned to the center:
https://ui-avatars.com/api/?name=II&size=250

ps. Awesome service to help out with project bootstrapping.

@LasseRafn
Copy link
Owner

Thank you!

Sure thing, I will attempt to make centering better! 👍

@HsRealDev
Copy link
Author

HsRealDev commented Oct 18, 2017

Hi Lasse,

I did some more debugging. And as one friend of mine once said: "The sitation is strange." :D

Changing the driver of ImageManager to Imagick in InitialAvatar class ...

InitialAvatar.php, line 34:
$this->image = new ImageManager(['driver' => 'imagick']);

... makes text to get then properly aligned in horizontal but the vertical alignment then goes wrong :)

Bugger.

Maybe there be a bug somewhere in Intervention -> Image lib.
Or with the font.

@HsRealDev
Copy link
Author

And I debugged even a bit more using directly ImageMagick. I did this simple command line script:

<?php
declare(strict_types=1);

$fontFileName = 
    "/tmp/fonts/OpenSans-Regular.ttf";

$fillColor       = new \ImagickPixel('#000');
$strokeColor     = new \ImagickPixel('#000');
$backgroundColor = new \ImagickPixel('#f7f924');

$initials = 'PM';

$avatarSize = 256;
$fontSize   = 0.5 * $avatarSize;

$draw = new \ImagickDraw();
$draw->setStrokeColor($strokeColor);
$draw->setFillColor($fillColor);
$draw->setStrokeWidth(2);
$draw->setFontSize($fontSize);

$draw->setFont(
    $fontFileName
);

$draw->setGravity(\Imagick::GRAVITY_CENTER);
$draw->annotation(0, 0, $initials);

$imagick = new \Imagick();
$imagick->newImage($avatarSize, $avatarSize, $backgroundColor);
$imagick->drawImage($draw);
$imagick->writeImage("/tmp/test.png");

That one also has some problems to place the text correctly "exactly" aligned. But, IMHO, has better general output on different fonts and sizes.

What do you think Lasse? If you feel like this won't fix on UI-avatars, i understand :) In that case, just close this issue.

@LasseRafn
Copy link
Owner

Sorry for the crazy slow response, been super busy. Anyway, I think this makes sense 👍 Will try to experiment and compare the two, maybe add an option to use one, but default to the most correct one

@TomW1605
Copy link

Hi this is a really useful service however this off centre issue is starting to bug me too. Is there any update on fixing this?

@LasseRafn
Copy link
Owner

LasseRafn commented Sep 29, 2019 via email

@aliaanis
Copy link

aliaanis commented Jan 9, 2020

Any solution yet ?

@LasseRafn
Copy link
Owner

@aliaanis I've been unable to find a solution 👎 I will try @HsRealDev's solution as I think he is definitively onto something (good work, thanks!)

@LasseRafn LasseRafn self-assigned this Mar 5, 2020
@curtiscook
Copy link

fwiw: it looks like svg might be rendering correctly and failing during png conversion?
svg (https://ui-avatars.com/api/?name=B&size=250&format=svg)
image

png (https://ui-avatars.com/api/?name=B&size=250&format=png)
image

@redac
Copy link

redac commented Oct 25, 2023

Any updates on this @LasseRafn ? 🙏🏼

@redac
Copy link

redac commented Feb 29, 2024

@LasseRafn did the solution you tried lead anywhere?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants