php image create and jquery dialog

Question

Hey All

I want to be able to show an image made on the fly with php in jQuery Dialog window.

When I try this all I get is the binary data for the image. But creating the image on a normal php page is not a problem.

I have a simple php script to create the image

 public function image()
{
    header('Content-type: image/png');

    // Create the image
    $im = imagecreatetruecolor(400, 400);

    // Create some colors
    $white = imagecolorallocate($im, 255, 255, 255);
    $grey = imagecolorallocate($im, 128, 128, 128);
    $black = imagecolorallocate($im, 0, 0, 0);
    imagefilledrectangle($im, 0, 0, 399, 399, $white);

    // The text to draw
    $text = 'Just some simple text...';

    $font = 'arial.ttf';

    // Add some shadow to the text
    imagettftext($im, 20, 0, 10, 40, $grey, $font, $text);

    // Add the text
    imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

    // Using imagepng() results in clearer text compared with imagejpeg()
    imagepng($im);
    imagedestroy($im);
}

Creation of the dialog is not a problem and outputting html.

Any suggestion on how I can get this to show my created image ?

Really hope someone can help?

Thank you

Answer 1

Load the image using $.ajax() and inject into DOM:

$.load('#yourDialogContentDiv').html('<img src="http://YOUR_PHP_IMAGE_GENERATOR_SCRIPT" />'));

Then show your jQuery dialog. Presto!