Question

I'm working at my own signature generator. How to show in-fly generated image without modifying header? I need to know it, because my site (based on WordPress) already sent headers, and I cannot modify it. Of course I can modify theme, but I am just beginning in PHP. If I modify headers everything works (almost working script), but when I want to open it in WordPress, the image isn't generated. I have also second question: how to add to my generated any extension to show it on any forum (it's example) - in this case: png? I don't want save generated image, but if I must after save image must be deleted.

<?php
if( ! empty($_GET['nick']) ){
    //default
    $nick = $_GET['nick'];
    if(empty($_GET['server']))
        $server = 'eu';
        else $server = $_GET['server'];
    if(empty($_GET['font']))
        $font = 'calibri';
        else $font = $_GET['font'];
    //generacja
    $szerokosc = 350;
    $wysokosc = 19;
    $rozmiar = 13;
    $ob = imagecreatetruecolor($szerokosc, $wysokosc);
    $czarny = imagecolorallocate($ob, 0, 0, 0);
    $bialy = imagecolorallocate($ob, 255, 255, 255);
    putenv('GDFONTPATH=/home/p221366/public_html/snippets/fonts');
    imagettftext($ob, $rozmiar, 0, ($szerokosc/2), (($wysokosc-$rozmiar)/2)+$rozmiar, $bialy, $font, $nick.' '.$server);
    Header('Content-type: image/png'); 
    imagepng($ob/*, $local*/);
    imagedestroy($ob);
} else {//bez arg
    if ( isset($_GET['nick']) )
        echo '<p color=#ff0000>Invalid nickname!</p>';
    echo '<form method=get>
        <table align="center" border=0>
            <tr>
                <td bgcolor=#aaaaaa align="right">Nick</td>
                <td bgcolor=#cccccc align="center"><input type="text" name="nick" size="15" /></td>
            </tr>
            <tr>
                <td bgcolor=#aaaaaa align="right">Server</td>
                <td bgcolor=#cccccc align="center">
                    <select name="server">
                        <option value="eu">European</option>
                        <option value="ru">Russian</option>
                        <option value="com">American</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td bgcolor=#aaaaaa align="right">Font</td>
                <td bgcolor=#cccccc align="center">
                    <select name="font">
                        <option value="arial">Arial</option>
                        <option value="calibri">Calibri</option>
                        <option value="consola">Consolas</option>
                        <option value="courier">Courier New</option>
                        <option value="segoe">Segoe Script</option>
                        <option value="verdana">Verdana</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="Submit" /></td>
            </tr>
        </table>
    </form>';
}

?>

Was it helpful?

Solution

Images are requested in a seperate request from the HTML page. If you want to create images on the fly, you cannot SEND them to the browser in the same request that sends the HTML page itself. You must generate appropriate tags that contain a URL to the script that will generate the image.

Beware that your image script will produce some kind of load, so unless the image must be super-dynamic, think about storing the image in a permanent location and simply read this file at any later request.

There will be only one exception from this rule: If you use the "data:" pseudo protocol, then you are able to include the image data directly inside this pseudo protocol, and only then would you be able to include the image data inside the HTML. Consider that because the image data has to be compatible with usual URL conventions, is has to be base64 encoded, which adds significantly to the amount of data transferred. Also such URLs cannot be cached inside the browser, because they must be present in every single image tag completely in case the browser does not have a cache entry yet.

So basically, data urls, besides needing support from the browser, should only be used for very small images like the famous "transparent gif pixel", because adding HTTP overhead for a separate image request that results in 43 bytes of image data is huge in this case (about 1 kb per request).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top