php drawing based on csv data

Question

What I am trying to do is load some values from a csv file, and use them as the x, y values to draw some rectangles.

I am loading the file, but instead of displaying the images, I am outputting the raw image data. I know that in the html code I can use

<img scr="foo.php"></script>

to display the image correctly, but I don't know how to use this to draw multiple rectangles based off each row of data in the csv file. Please help.

csv code

20,40,60,80
50,100,150,175

index php code

<html>
    <body>
        <?php
            include("parse.php");
        ?>
    </body>
</html>

parse php code

<?php

include("draw.php");

$file = fopen("data.csv", "r");
while (!feof($file)) {
    $line = fgetcsv($file);

        drawGraph($line[0], $line[1], $line[2], $line[3]);

}
fclose($file);
?>

draw php code

<?php

function drawGraph($xPos, $yPos, $xxPos, $yyPos) {

//create a 200 x 200 canvas image
$canvas = imagecreatetruecolor(200, 200);

//set canvas background to white
$white = imagecolorallocate($canvas, 255, 255, 255);
imagefill($canvas, 0, 0, $white);

//create colors
$pink = imagecolorallocate($canvas, 255, 105, 180);

//draw rectangles
imagerectangle($canvas, $xPos, $yPos, $xxPos, $yyPos, $pink);

//ERROR - following line displays raw data of image not the actural image
imagepng($canvas);

imagedestroy($canvas);
}

?>

I actually didn't understand you completely, but maybe this helps: Remember to do header('Content-Type: image/png') before pushing the raw data. — Lars Knickrehm
– Lars Knickrehm, Commented Aug 12, 2012 at 0:56
This is some of the html output with no header ‰PNG IHDRÈÈ":9É=IDATxœíÜÁ Ã0A;¤»t’‚Ò‰ëSÈÃA^fæ/t ýnclpµÇê¸'a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘ a‘‰çÔé÷qÑÿû¼–]Í sam‹xaÐœã+$!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Â"!,Óë¸mÆæ—}Œ±znÈWHBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX$„EBX — user1334130
– user1334130, Commented Aug 12, 2012 at 1:26
With a header add the raw data display the "broken image" link, so something isn't quite right. — user1334130
– user1334130, Commented Aug 12, 2012 at 1:27

inevio · Accepted Answer · 2012-08-12 01:34:50Z

1

You need to pass a Content-Type header telling the browser the data is image. If you do this with your drawGraph function it's going to output raw data no matter.

<html>
    <body>
            <?php
                include("parse.php");
            ?>
        </body>
</html>

You probably want to do it with drawGraph returning into the image itself. Such that like you showed originally and then make sure to use header('Content-Type: image/png'); or equivalent to what you are generating.

If you want to test it directly in the browser you need to drop the tags from your example and just put <?PHP include("parse.php"); ?>with no other characters outside the php tags (if you leave extra spaces or newlines it's going to think it's part of your image.

Edit: Missed the loop issue.

Remember that your drawGraph function creates and displays a single png in imagepng which means if you call it multiple times in your example it's going to be separate PNG images all mushed together. You probably want to instantiate the image and just draw your rectangles in the loop, then finally output the image.

//create a 200 x 200 canvas image
$canvas = imagecreatetruecolor(200, 200);

//set canvas background to white
$white = imagecolorallocate($canvas, 255, 255, 255);
imagefill($canvas, 0, 0, $white);

//create colors
$pink = imagecolorallocate($canvas, 255, 105, 180);

$file = fopen("data.csv", "r");
while (!feof($file)) {
    $line = fgetcsv($file);

    //draw rectangles
    imagerectangle($canvas, $line[0], $line[1], $line[2], $line[3], $pink);

}

fclose($file);


/** finally output entire single png **/    
//ERROR - following line displays raw data of image not the actural image
imagepng($canvas);

imagedestroy($canvas);

edited Aug 12, 2012 at 1:34

answered Aug 12, 2012 at 1:02

inevio

8876 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

user1334130 Over a year ago

I've already tried a header with Content-Type: image/png, but it didn't work.

inevio Over a year ago

Are you sure you had removed all extraneous characters? It's literally the textbook example php.net/manual/en/function.imagepng.php

user1334130 Over a year ago

OK I just tried again adding the header to the index.php file. It still doesn't work but, like before, displays the "broken link" icon for an image.

inevio Over a year ago

You're missing some trailing spaces, I would almost bet or you're header isn't formatted properly. You'll have to use some debugging with the browser to see what it's receiving if you don't see it right away. You literally cannot have "<?php // image stuff ?> " for the file.

user1334130 Over a year ago

I don't understand what you mean with why I can't have <?php // image stuff ?> for the file. Shouldn't the php file be able to "return" an image to be displayed by the browser?

|

Collectives™ on Stack Overflow

php drawing based on csv data

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related