How raise text in written text with intervention/image?

Question

In my Laravel 5.8 app using "intervention/image": "^2.4" library and css like:

    .banner_image {
        border-radius: 20%;
        border-style: outset;

        -webkit-border-radius: 20%;
        -moz-border-radius: 20%;
        -webkit-box-shadow: #000 0 2px 10px;
        -moz-box-shadow: #000 0 2px 10px;

        padding: 8px;
        box-shadow: 0px 0px 20px #b4b4b4;

        border-top:none;
        border-left:none;
        border-right:solid 2px #dddddd;
        border-bottom:solid 2px #dddddd;
    }

I generate banners based on rows in db with title, text and logo image: https://prnt.sc/oefaev

I used text method like

$img->text($banner_short_descr, 20 /* x */, 150 /* y */, function($font) use($text_color) {
    $font->file( public_path('fonts/roboto/Roboto_regular.ttf') );
    $font->size(24);
    $font->color($text_color);
});

Now I need to add 2 features:

Raise text of the banner and add some shadow to it.
Raise border of the whole banner. If possible make several external/internal borders

How can I do this?

score 1 · Answer 1 · answered Apr 28 '21 at 11:04

Method 1 - Best approach:

inside src/Intervention/Image/Font.php line 419 change imagettftext to imagettfstroketext

so it will be:

$stroke_color = imagecolorallocate($image->resource, 0, 0, 0);
imagettfstroketext($image->resource, $this->getPointSize(), $this->angle, $posx, $posy, $color, $stroke_color, $this->file, $this->text,2);

and add this function :

function imagettfstroketext(&$image, $size, $angle, $x, $y, &$textcolor, &$strokecolor, $fontfile, $text, $px) {
    for($c1 = ($x-abs($px)); $c1 <= ($x+abs($px)); $c1++)
        for($c2 = ($y-abs($px)); $c2 <= ($y+abs($px)); $c2++)
            $bg = imagettftext($image, $size, $angle, $c1, $c2, $strokecolor, $fontfile, $text);
   return imagettftext($image, $size, $angle, $x, $y, $textcolor, $fontfile, $text);
}

Method 2

use a font that’s already got a shadow effect on it

Mehod 3

Draw the text twice

   $img->text($banner_short_descr, 20 /* x */, 150 /* y */, function($font) use($shadow_color) {
            $font->file( public_path('fonts/roboto/Roboto_regular.ttf') );
            $font->size(24);
            $font->color($shadow_color);
        });
       $img->text($banner_short_descr, 23 /* x */, 153 /* y */, function($font) use($text_color) {
            $font->file( public_path('fonts/roboto/Roboto_regular.ttf') );
            $font->size(24);
            $font->color($text_color);
        });

The best results was Method 1

How raise text in written text with intervention/image?

1 Answers1