Reputation: 91

Displaying php image

I am trying to display shapes into a html site.The shape are to represent a bar graph. I am trying to display the image but every time I run the site it shows a broken image link.

Here is the entire file

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>psdtoweb120715EmailSummary1195.psd</title>
    <link type="text/css">
</head>
<style >
 {
body, table, tr, td, p {
margin: 0;
padding: 0;
}



</style>
<body margin = "0" padding = "0">
    <table width = "100%" height = "826"margin = "0" padding = "0"> 
        <tr margin = "0" padding = "0">
            <td width = "25%" margin = "0" padding = "0"> </td>
            <td margin = "0" padding = "0">  
                    <table  margin = "0" padding = "0" width = "612" height = "826" background= "http://piqdev.myperformanceiq.com/brian/images/bckgrnd1.png" style="background-repeat:no-repeat;>
                            <tr margin = "0" padding = "0"> 
                                <td valign = "top"> <p style= "margin:0; padding-left: 20px; text-transform: uppercase;font-size: 30pt; color: #ffffff;font-family: Calibri, Georgia, Serif; font-weight: bold;" >Steve.b</p></td>
                                <td colspan = "2" valign = "top" align = "right" style = "padding-left:100px; padding-right: 10px"><p style= " display: relative;margin:0; padding-top: 5px;font-size: 12pt; color: #ffffff;font-family: Calibri, Georgia, Serif; font-weight: bold;"> Result summary for: <span style= "margin:0; font-size: 15pt; color: #ffffff;font-family: Calibri, Georgia, Serif; font-weight: bold;"> 8/20/15</span><br/>55 Minutes (6:00 am - 6:55am)  </p></td>                                   
                            </tr>
                            <tr margin = "0" padding = "0" height = "10%" display = "relative"> 
                                <td valign = "top" margin = "0" padding = "0" style= "margin:0; padding-bottom: 60px;font-size: 70pt; color: #ffffff;font-family: Calibri, Georgia, Serif; font-weight: bold;"><p style = "padding-left: 100px; padding-bottom: 390px; " >500  </p></td>
                                <td valign = "top" margin = "0" padding = "0" style= "margin:0; font-size: 40pt; color: #ffffff;font-family: Calibri, Georgia, Serif; font-weight: bold;"><p style = "padding-left: 50px; padding-top: 20px;padding-bottom: 10px;">300  <br/><div style = "padding-left: 55px;padding-top:0px; ">600  </div></td>
                                <td valign = "top" margin = "0" padding = "0" style= "margin:0; font-size: 40pt; color: #ffffff;font-family: Calibri, Georgia, Serif; font-weight: bold;"><p style = "padding-top: 20px; padding-left: 20px; padding-right: 42px; ">200 <br/> <div style = "padding-left: 15px; padding-top:13px; font-size:35pt;"  >3/12 </div></td>
                            </tr>

                            <tr>
                                <td>
                                    <?php
                                        // Create a 200 x 200 image
                                        $canvas = imagecreatetruecolor(200, 200);

                                        // Allocate colors
                                        $red = imagecolorallocate($canvas, 255, 0, 0);
                                        $blue = imagecolorallocate($canvas, 55, 149, 255);
                                        $green = imagecolorallocate($canvas, 5, 186, 78);
                                        $yellow = imagecolorallocate($canvas, 219, 255, 70);
                                        $orange= imagecolorallocate($canvas, 255, 212, 36);



                                        // Draw three rectangles each with its own color
                                        imageFilledRectangle($canvas, 0, 120, 40, 200, $blue);
                                        imageFilledRectangle($canvas, 80, 200, 40, 100, $green);
                                        imageFilledRectangle($canvas, 115, 200,81, 120, $yellow);
                                        imageFilledRectangle($canvas, 115, 150, 155, 200, $orange);
                                        imageFilledRectangle($canvas, 155, 160, 200, 200, $red);


                                        // Output and free from memory
                                        header('Content-Type: image/jpeg');

                                        imagejpeg($canvas);
                                        imagedestroy($canvas);
                                        ?>
                                        <img src= "<?php echo $canvas; ?>"/>
                                </td>

                            </tr>





                    </table>

            </td>
            <td width = "25%"> </td>
        </tr>
    </table>

Upvotes: 0

Answers (2)

Will

Reputation: 24699

While I like @Fred's approach better, you can actually do this a different way.

<tr>
    <td>
        <?php
            // Create a 200 x 200 image
            $canvas = imagecreatetruecolor(200, 200);

            // Allocate colors
            $red = imagecolorallocate($canvas, 255, 0, 0);
            $blue = imagecolorallocate($canvas, 55, 149, 255);
            $green = imagecolorallocate($canvas, 5, 186, 78);
            $yellow = imagecolorallocate($canvas, 219, 255, 70);
            $orange= imagecolorallocate($canvas, 255, 212, 36);



            // Draw three rectangles each with its own color
            imageFilledRectangle($canvas, 0, 120, 40, 200, $blue);
            imageFilledRectangle($canvas, 80, 200, 40, 100, $green);
            imageFilledRectangle($canvas, 115, 200,81, 120, $yellow);
            imageFilledRectangle($canvas, 115, 150, 155, 200, $orange);
            imageFilledRectangle($canvas, 155, 160, 200, 200, $red);

            ob_start();
            imagejpeg($canvas);
            $buffer = ob_get_clean();

            imagedestroy($canvas);
            ?>

            <img src= "<?php echo "data:image/jpeg;base64," . base64_encode($buffer); ?>"/>
    </td>
</tr>

Your original problem is that you were just trying to put the raw binary image data into the <img src=...> tag, and you can't do that. It either needs to be an external file, or properly-encoded data.

This will actually embed the image into the page as base64, preventing a second HTTP request. Note that this will make the page much larger to download and will prevent caching of the images, so it's not recommended for most situations.

As @Dagon pointed out in the comments, some older browsers won't support this, but most modern browsers do.

Upvotes: 1

Funk Forty Niner

Reputation: 74217

Place this code block inside another file, call it "showimage.php".

<?php
    // Create a 200 x 200 image
    $canvas = imagecreatetruecolor(200, 200);

    // Allocate colors
    $red = imagecolorallocate($canvas, 255, 0, 0);
    $blue = imagecolorallocate($canvas, 55, 149, 255);
    $green = imagecolorallocate($canvas, 5, 186, 78);
    $yellow = imagecolorallocate($canvas, 219, 255, 70);
    $orange= imagecolorallocate($canvas, 255, 212, 36);



    // Draw three rectangles each with its own color
    imageFilledRectangle($canvas, 0, 120, 40, 200, $blue);
    imageFilledRectangle($canvas, 80, 200, 40, 100, $green);
    imageFilledRectangle($canvas, 115, 200,81, 120, $yellow);
    imageFilledRectangle($canvas, 115, 150, 155, 200, $orange);
    imageFilledRectangle($canvas, 155, 160, 200, 200, $red);


    // Output and free from memory
    header('Content-Type: image/jpeg');

    imagejpeg($canvas);
    imagedestroy($canvas);
    ?>

Then replace this whole block:

<tr>
    <td>
        <?php
            // Create a 200 x 200 image
            $canvas = imagecreatetruecolor(200, 200);

            // Allocate colors
            $red = imagecolorallocate($canvas, 255, 0, 0);
            $blue = imagecolorallocate($canvas, 55, 149, 255);
            $green = imagecolorallocate($canvas, 5, 186, 78);
            $yellow = imagecolorallocate($canvas, 219, 255, 70);
            $orange= imagecolorallocate($canvas, 255, 212, 36);



            // Draw three rectangles each with its own color
            imageFilledRectangle($canvas, 0, 120, 40, 200, $blue);
            imageFilledRectangle($canvas, 80, 200, 40, 100, $green);
            imageFilledRectangle($canvas, 115, 200,81, 120, $yellow);
            imageFilledRectangle($canvas, 115, 150, 155, 200, $orange);
            imageFilledRectangle($canvas, 155, 160, 200, 200, $red);


            // Output and free from memory
            header('Content-Type: image/jpeg');

            imagejpeg($canvas);
            imagedestroy($canvas);
            ?>
            <img src= "<?php echo $canvas; ?>"/>
    </td>
</tr>

With: (and that file needs to be .php extension)

<tr>
    <td>
        <img src= "showimage.php" />
    </td>
</tr>

The image source needs to be a file pointer, not an echo from your image generator code.

Upvotes: 2

Displaying php image

Answers (2)

Related Questions