Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Generating the gradiented TXT with imagettftext, can't make it look smooth

    Hi guys, I've coded a simple script that makes you able to generate a text using any true type font you want. the result is PNG24 image. It's really useful when you need to dynamically generate a menu item or something on your website...

    code:

    PHP Code:
    <?
    header
    ("content-type: image/png");
        
    /*
        if (file_exists("_cache_img/".$_GET['text'].".png"))
        {
            echo file_get_contents("_cache_img/".$_GET['text'].".png");
            die();
        }
        */
        
    if(!isset($_GET['size']))  { $_GET['size'] = 10; }
        if(!isset(
    $_GET['text']))  { $_GET['text'] = "GENERATED IMAGE"; }
        if(!isset(
    $_GET['font']))  { $_GET['font'] = "Sanet.ttf"; } //key sensitive
        
    if(!isset($_GET['color'])) { $_GET['color'] = '#000000'; }
        if(!isset(
    $_GET['contur'])) { $_GET['contur'] = "#252423"; }
        
    $size imagettfbbox($_GET['size'], 0$_GET['font'], $_GET['text']);

        
    $cont html2rgb($_GET['contur']);
        
    $color_array html2rgb($_GET['color']);


        
    $xsize abs($size[0]) + abs($size[2]) + 1// + 1 ar moashoro! achris mere da bolo asos enzreva.
        
    $ysize abs($size[5]) + abs($size[1]);
        
        
    $image imagecreate($xsize$ysize);

      
        
        
    // transparent
      
    //    imageSaveAlpha($image, true);
    //    ImageAlphaBlending($image, true);

        //imagecolorallocate($image, $cont[0], $cont[1], $cont[2]);
        
    imagecolorallocatealpha($image$cont[0], $cont[1], $cont[2], 127);
        
    //imagefill($image, 0, 0, $transparentColor);    



       
        // end transparent
        
        
    function html2rgb($color)
        {
            if (
    $color[0] == '#')
                
    $color substr($color1);
        
            if (
    strlen($color) == 6)
                list(
    $r$g$b) = array($color[0].$color[1],
                                         
    $color[2].$color[3],
                                         
    $color[4].$color[5]);
            elseif (
    strlen($color) == 3)
                list(
    $r$g$b) = array($color[0].$color[0], $color[1].$color[1], $color[2].$color[2]);
            else
                return 
    false;
        
            
    $r hexdec($r); $g hexdec($g); $b hexdec($b);
        
            return array(
    $r$g$b);
        }
        
        
        
        
         

            
        
    $color ImageColorAllocate($image$color_array[0],$color_array[1],$color_array[2]);
        
        
    imagettftext($image$_GET['size'], 0abs($size[0]), abs($size[5]), $color$_GET['font'], $_GET['text']);

     


    imagepng($image);

    imagedestroy($image);

    ?>
    Usage:
    <img src="font.php?size=40&font=ARIAL.TTF&text=BlahBlah&color=FF0000&contur=CCCCCC" />
    Ok, it's really simple and result looks great.

    No I'm trying to add a gradient effect to the text so I did something like:

    PHP Code:
    <?
    header
    ("content-type: image/png");
        
    /*
        if (file_exists("_cache_img/".$_GET['text'].".png"))
        {
            echo file_get_contents("_cache_img/".$_GET['text'].".png");
            die();
        }
        */
        
    if(!isset($_GET['size']))  { $_GET['size'] = 10; }
        if(!isset(
    $_GET['text']))  { $_GET['text'] = "GENERATED IMAGE"; }
        if(!isset(
    $_GET['font']))  { $_GET['font'] = "Sanet.ttf"; } //key sensitive
        
    if(!isset($_GET['color'])) { $_GET['color'] = '#000000'; }
        if(!isset(
    $_GET['contur'])) { $_GET['contur'] = "#252423"; }
        
    $size imagettfbbox($_GET['size'], 0$_GET['font'], $_GET['text']);

        
    $cont html2rgb($_GET['contur']);
        
    $color_array html2rgb($_GET['color']);


        
    $xsize abs($size[0]) + abs($size[2]) + 1// + 1 ar moashoro! achris mere da bolo asos enzreva.
        
    $ysize abs($size[5]) + abs($size[1]);
        
        
    $image imagecreate($xsize$ysize);

      
        
        
    // transparent
      
    //    imageSaveAlpha($image, true);
    //    ImageAlphaBlending($image, true);

        //imagecolorallocate($image, $cont[0], $cont[1], $cont[2]);
        
    imagecolorallocatealpha($image$cont[0], $cont[1], $cont[2], 127);
        
    //imagefill($image, 0, 0, $transparentColor);    



       
        // end transparent
        
        
    function html2rgb($color)
        {
            if (
    $color[0] == '#')
                
    $color substr($color1);
        
            if (
    strlen($color) == 6)
                list(
    $r$g$b) = array($color[0].$color[1],
                                         
    $color[2].$color[3],
                                         
    $color[4].$color[5]);
            elseif (
    strlen($color) == 3)
                list(
    $r$g$b) = array($color[0].$color[0], $color[1].$color[1], $color[2].$color[2]);
            else
                return 
    false;
        
            
    $r hexdec($r); $g hexdec($g); $b hexdec($b);
        
            return array(
    $r$g$b);
        }
        
        
        
        
         

            
        
    $color ImageColorAllocate($image$color_array[0],$color_array[1],$color_array[2]);
        
        
    imagettftext($image$_GET['size'], 0abs($size[0]), abs($size[5]), $color$_GET['font'], $_GET['text']);

     
        
    // imagepng($image,"_cache_img/".$_GET['text'].".png");
        // imagepng($image);
        // imagedestroy($image);


        //GET TYPE (THAT USER WANTS)
        
    $type = @$_GET['type'];
        if (
    $type == false) {
            
    $type 'top';
        }
        
        
    //GET DIMENTIONS (THAT USER WANTS)
        
    $height intval($ysize);
        if (
    $height == 0) {
            
    $height 50;
        }
        
    $width intval($xsize);
        if (
    $width == 0) {
            
    $width 100;
        }
        
        
    //GET HEX COLOURS (THAT USER WANTS)
        
    $start_colour $_GET['start_colour'];
        if (
    $start_colour == false) {
            
    $start_colour 'FF0000';
        }
        
    $end_colour $_GET['end_colour'];
        if (
    $end_colour == false) {
            
    $end_colour '000000';
        }
        
        
    //CONVERT HEX COLOURS TO RGB
        
    $hex_r  substr($start_colour02);
        
    $hex_g substr($start_colour22);
        
    $hex_b substr($start_colour42);
        
        
    $start_r hexdec($hex_r);
        
    $start_g hexdec($hex_g);
        
    $start_b hexdec($hex_b);
        
        
    $hex_r  substr($end_colour02);
        
    $hex_g substr($end_colour22);
        
    $hex_b substr($end_colour42);
        
        
    $end_r hexdec($hex_r);
        
    $end_g hexdec($hex_g);
        
    $end_b hexdec($hex_b);
        
        
        
        if (
    $type == 'top') {
            
            
            
    //LOOP THROUGH ALL THE PIXELS
            
    for($y 0$y $height$y++) {
                
                
    //LOOP THROUGH ROW
                
    for($x=0$x $width$x++) {
                    
                   
                    
    //CALCULATE THIS ROWS RGB COLOURS
                    
                    
    if ($start_r == $end_r) {
                        
    $new_r $start_r;
                    }
                    
    $difference $start_r $end_r;
                    
    $new_r $start_r intval(($difference $height) * $y);
                    
                    
    //====
                    
                    
    if ($start_g == $end_g) {
                        
    $new_g $start_g;
                    }
                    
    $difference $start_g $end_g;
                    
    $new_g $start_g intval(($difference $height) * $y);
                    
                    
    //===
                    
                    
    if ($start_b == $end_b) {
                        
    $new_b $start_b;
                    }
                    
    $difference $start_b $end_b;
                    
    $new_b $start_b intval(($difference $height) * $y);
                    
                    
    //===
                    
                    //ALLOCATE THE COLOR
                    
    $row_color imagecolorresolve($image$new_r$new_g$new_b);
                    
                    
    //CREATE ROW OF THIS COLOR
                    
                    
    $col imagecolorat ($image$x$y);
                    
    $col imagecolorsforindex ($image$col);
        
                    
    $col_text['red'] = $color_array[0];
                    
    $col_text['green'] = $color_array[1];
                    
    $col_text['blue'] = $color_array[1];
                    
    $col_text['alpha'] = 0;
        
                    
    $col2 imagecolorat($image$x$y);
                    
    $col2 imagecolorsforindex($image$col2);
        
                    
    $col_text2['red'] = $new_r;
                    
    $col_text2['green'] = $new_g;
                    
    $col_text2['blue'] = $new_b;
                    
    $col_text2['alpha'] = 0;
        
                
        
                    
                    
    // print_r($col); echo "<br>"; print_r($col_text); echo "<br><br>";
                    
                    
    if($col_text == $col) {
                        
    imagesetpixel($image$x$y$row_color);
                        
                    }
        
                    
    $newblue imagecolorclosest($image$cont[0], $cont[1], $cont[2]);
                    
                    
    //imagesetpixel($image, $x, $y, $row_color);
        
                
    }
                
            }
        
        }


    /*
    if ($type == 'left') {
        
        //LOOP THROUGH ALL THE PIXELS
        for($x = 0; $x < $width; $x++) {
            
            //LOOP THROUGH COLUMN
            for($y=0; $y < $height; $y++) {
                
                //CALCULATE THIS ROWS RGB COLOURS
                
                if ($start_r == $end_r) {
                    $new_r = $start_r;
                }
                $difference = $start_r - $end_r;
                $new_r = $start_r - intval(($difference / $width) * $x);
                
                //====
                
                if ($start_g == $end_g) {
                    $new_g = $start_g;
                }
                $difference = $start_g - $end_g;
                $new_g = $start_g - intval(($difference / $width) * $x);
                
                //===
                
                if ($start_b == $end_b) {
                    $new_b = $start_b;
                }
                $difference = $start_b - $end_b;
                $new_b = $start_b - intval(($difference / $width) * $x);
                
                //===
                
                //ALLOCATE THE COLOR
                $row_color = imagecolorresolvealpha($image, $new_r, $new_g, $new_b, 127);
                
                //CREATE ROW OF THIS COLOR
                imagesetpixel($image, $x, $y, $row_color);
                
            }
            
        }
        
    }
    */

    imagepng($image);

    imagedestroy($image);

    ?>
    The Problem is that I can't make it look smoother.. result is really crappy. I know that the code is messy but test it and you'll know what I meant.

    Sorry for my english.
    Help is really appreciated.

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    103
    Thanks
    1
    Thanked 8 Times in 8 Posts
    Can we see a sample output? It may help diagnose the problem a bit better.

  • Users who have thanked p4plus2 for this post:

    Sandrix (07-20-2008)

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by p4plus2 View Post
    Can we see a sample output? It may help diagnose the problem a bit better.
    Sure,



    I still don't get how you're going to diagnose the code without testing it on server but here's the screen



    thanks

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Posts
    103
    Thanks
    1
    Thanked 8 Times in 8 Posts
    Well, based on what I see there it is the worst on letters with major curves such as the 'S'. I am not sure how fixable it...This is a problem most programs(eg. paint) have. Straight lines are simple and clear but the moment you add a curve its goes whack....I will see what I can do though and get back to you, but there are no guarantees.

  • #5
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    I'm the furthest thing from a graphics artist, but I'll give my two cents anyway.
    I think that what you are getting is simply because of the font size. The glyph thats in use is a bitmap type instead of a vector type font, so when you increases its font size it does so by magnifying the blocks within it instead of recalculating the differences between the vector's points. Like I said though, I'm not an artist and can't be sure if this is the problem.

    Looks great to me though, I wouldn't worry about a little pixelization!

    Edit:
    I lied. According to this article: http://computer.howstuffworks.com/question460.htm, ttf files are vector based not bitmap based. Methinks that may be as clears as you'll get it to be. Like I said, looks good for a dynamic image.
    Last edited by Fou-Lu; 07-20-2008 at 07:45 PM.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #6
    Regular Coder
    Join Date
    Mar 2008
    Posts
    103
    Thanks
    1
    Thanked 8 Times in 8 Posts
    I am sorry to say I did not find any problems in your source, or a fix for that matter. I recommend sticking with a more "block like" font. It should come out much more smooth.

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Fou-Lu View Post
    I'm the furthest thing from a graphics artist, but I'll give my two cents anyway.
    I think that what you are getting is simply because of the font size. The glyph thats in use is a bitmap type instead of a vector type font, so when you increases its font size it does so by magnifying the blocks within it instead of recalculating the differences between the vector's points. Like I said though, I'm not an artist and can't be sure if this is the problem.

    Looks great to me though, I wouldn't worry about a little pixelization!

    Edit:
    I lied. According to this article: http://computer.howstuffworks.com/question460.htm, ttf files are vector based not bitmap based. Methinks that may be as clears as you'll get it to be. Like I said, looks good for a dynamic image.
    yes, ttf is vector font, but, in my opinion, you are correct because the script work with raster format,
    also that's half of the problem, I guess, the other half is numeric aproximation, .

    regards

  • #8
    New Coder
    Join Date
    Feb 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well the problem occurs only in gradient version.. So I don't think that it's because of size or because of font type. here's the output without the gradient & it looks great:


  • #9
    Regular Coder
    Join Date
    Mar 2008
    Posts
    103
    Thanks
    1
    Thanked 8 Times in 8 Posts
    remove color(set it transparent...or something), then try the script again...or add the white border to the other image for same results

  • #10
    New Coder
    Join Date
    Feb 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You can't set the color to transparent and/or remove the actual color it's is need for script to work...
    I don't need an advice about how-to change the values of my own variables... I need a logical solution.

    anyone?
    Last edited by Sandrix; 07-21-2008 at 04:41 PM.

  • #11
    Regular Coder
    Join Date
    Mar 2008
    Posts
    103
    Thanks
    1
    Thanked 8 Times in 8 Posts
    can you add 1 more pixel to the white border then? that may make it a little bit better.

  • #12
    New Coder
    Join Date
    Feb 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Unfortunately I can't... Cuz The that's not exactly a white color, it has an alpha blending value witch is set by imagecolorallocatealpha() function... I can't interact with it.

    Problem is not phisical, it's logical.
    Last edited by Sandrix; 07-22-2008 at 04:28 PM.

  • #13
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Sandrix View Post
    Unfortunately I can't... Cuz The that's not exactly a white color, it has an alpha blending value witch is set by imagecolorallocatealpha() function... I can't interact with it.

    Problem is not phisical, it's logical.
    why you can't interact with it? what do you mean when you say "logical"?

    regards

  • #14
    New Coder
    Join Date
    Feb 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I can't interact with it cuz it works by it self I can only run it when I want.

    I mean that I'm using the wrong method:

    Code:
    if($col_text == $col) { 
                        imagesetpixel($image, $x, $y, $row_color); 
                         
                    } 
         
                    $newblue = imagecolorclosest($image, $cont[0], $cont[1], $cont[2]);
    the problem is here, I can't determine the exact solid color of the text and replace it with gradient. Because some of the pixels are using the alpha blending value. I can't add a gradient to them. I need a code snippet.

  • #15
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    apply same method to a pictures 2-3 times bigger then you need and rescale after.

    regards


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •