Creating images with text 'imagecreate()'

Question

This is going to be quite difficult to understand, because I don’t have a very dynamic explanation. I will try to be as clear as possible!

I want to create an identical letter generator to this:

http://image.prntscr.com/image/359de73d9e0845a7bf0dbd7675ce8a8f.png

This is the site: http://www.pixelacao.zz.mu/

But as everything with me has to be difficult the creation of the image went wrong. I don’t know where or why the code doesn’t perform perfectly, and no place reports error.

I checked the code several times and I can’t find the error.

This is what happens when I run: http://image.prntscr.com/image/cc41fe8a64bd442f8be94d243a07ab5e.png

<?php

$date = time();
//header("Content-disposition: attachment; filename=$date.png");
header('Content-type: image/png');

error_reporting(10);
$text = $_GET['text'];
$folder = $_GET['folder'];
$spacing = $_GET['space'];
if($spacing == ""){
    $spacing = 0;
}
if($text == ""){
    $text = "Habbo";
    $spacing = -2;
}

if($folder == ""){
    $folder = "wabbo4";
}

if($spacing == ""){
    if($folder == "1"){
        $spacing = 1;
    }
    if($folder == "2"){
        $spacing = 1;
    }
    if($folder == "3"){
        $spacing = -1;
    }
}
$folder = preg_replace("/[^a-zA-Z0-9s]/", "", $folder);
if(!is_dir($folder)){
    $folder = "1";
}

$length = strlen($text);

for($i = 0; $i < $length; $i++){

    $letter = substr($text, $i, 1);
    if($letter == "+"){
        $imgwidth = $imgwidth+5+$spacing;
    }else{
        if (preg_match("/[a-z]/", $letter)) {
            $letterimg = imagecreatefrompng("".$folder."/".$letter.".png"); 
            $letterimgwidth = ImageSX($letterimg);
            $letterimgheight = ImageSY($letterimg);
            $yoffset = 21-$letterimgheight;
            $imgwidth = $imgwidth+$letterimgwidth+$spacing;
        }elseif (preg_match("/[A-Z]/", $letter)){
            $letter = strtolower($letter);
            $letterimg = imagecreatefrompng("".$folder."/".$letter.".png"); 
            $letterimgwidth = ImageSX($letterimg);
            $letterimgheight = ImageSY($letterimg);
            $yoffset = 21-$letterimgheight;
            $imgwidth = $imgwidth+$letterimgwidth+$spacing;
        }else{
            $imgwidth = $imgwidth+5;
        }
    }
}

$imgwidth = $imgwidth-$spacing+1;

$im = imagecreate($imgwidth, $letterimgheight+1);
$overimageheight = $letterimgheight+1;
$background = imagecolorallocatealpha($im, 0, 255, 0, 0);
imagecolortransparent($im, $background);
$xcoord = 1;
for($i = 0; $i < $length; $i++){

    $letter = substr($text, $i, 1);
    if($letter == "+"){
        $xcoord = $xcoord+5+$spacing;
    }else{
        if (preg_match("/[a-z]/", $letter)) {
            $letterimg = imagecreatefrompng("".$folder."/".$letter.".png"); 
            $letterimgwidth = ImageSX($letterimg);
            $letterimgheight = ImageSY($letterimg);
            $yoffset = $overimageheight-$letterimgheight;
            if($letter == "g" || $letter == "j" || $letter == "q" || $letter == "p" || $letter == "y"){
            }
            imagecopy($im, $letterimg, $xcoord, $yoffset, 0, 0, $letterimgwidth, $letterimgheight); 
            $xcoord = $xcoord+$letterimgwidth+$spacing;
        }elseif (preg_match("/[A-Z]/", $letter)){
            $letter = strtolower($letter);
            $letterimg = imagecreatefrompng("".$folder."/".$letter.".png"); 
            $letterimgwidth = ImageSX($letterimg);
            $letterimgheight = ImageSY($letterimg);
            $yoffset = $overimageheight-$letterimgheight;
            imagecopy($im, $letterimg, $xcoord, $yoffset, 0, 0, $letterimgwidth, $letterimgheight); 
            $xcoord = $xcoord+$letterimgwidth+$spacing;
        }else{
            $xcoord = $xcoord+5;
        }
    }
}
header("Content-type: image/png");

imagepng($im); 
imagedestroy($im);

?>

In the case Folder would be the folder where the letters are, explaining better, the user writes the testo and the Folder would be the font where he would take the letter a,b,c... space would be the space between letters why some fonts need a larger space.

follows picture:

http://image.prntscr.com/image/bb8eab9bd39543729de97c456457b8b6.png

The result as I said would be the text formed by the letters of a certain source, but it of the error, DOES NOT REPORT ANY ERROR IN PHP.

I need that help, I’ve never been good with imagecreate(); I hope you’ve been clear about my problem.

Answer 1

Actually it was not very clear no, next time try to improve the description with images, failed attempts and success, detailed debug cases, etc...

Anyway, in this function you want to insert a content (INPUT) and just change the source of this content ? If I am correct, I made a code quickly that is self-explanatory, give a analyzed and any questions ask.

function generateText() {
    // Getting the values
    var initialText = document.getElementById("initialText").value;
    var finalText = document.getElementById("finalText");
    var fontSource = document.getElementById("fontSource").value;

    finalText.innerHTML = initialText;
    switch (fontSource) {
        case "arial":
            finalText.style.fontFamily = "arial, sans-serif";
            break;
        case "lucida":
            finalText.style.fontFamily = "lucida, sans-serif";
            break;
        case "verdana":
            finalText.style.fontFamily = "verdana, sans-serif";
            break;
    }
}

<input id="initialText" type="text" placeholder="Texto">
<select id="fontSource">
    <option value="arial">Arial</option>
    <option value="lucida">Lucida</option>
    <option value="verdana">Verdana</option>
</select>

<button onclick="generateText()">Alterar fonte</button>
<p id="finalText"></p>

Want to transform some content of your page into image ? Use html2canvas. Solving your problem or not, return with your feedback.