Sending images with php?

Question

I'm a php noob forced to add minor functionality to an existing php server. My task is for my php server to return a list of images to the client which will then be displayed on a page.

My JavaScript client code is here:

const http = new XMLHttpRequest();
const url = "http://myaddress.com/myphpserver?";
http.open("GET", url);
http.send();
http.onreadystatechange = (e) => {
    console.log(http.responseText);
}

I've tried this code on my server:

$im = imagecreatefrompng("myImage.png");
header('Content-Type: image/png');
imagepng($im);

found here but to no avail

my http.responseText is always empty. Am i going about this the wrong way?

In your `const url`, is your address really in the format `myaddress.com/myphpserver`? Because without the protocol, it will assume `myaddress.com` is a relative folder. — Obsidian Age, Jan 21 '19 at 21:46
That is not listing contents of a server/directory, that would just create a png...from a PNG? Maybe you're looking for `scandir`, or `glob`. — user3783243, Jan 21 '19 at 21:46
no, my url is `http://myaddress.com/myphpserver?` @ObsidianAge — philr, Jan 21 '19 at 21:46
Not according to your code it's not, also a by-the-by comment, but there are libraries like jQuery out there to help you remove the complexities / awkwardness around (but not limited to) AJAX. I'd suggest giving them a go. — Jonnix, Jan 21 '19 at 21:47
@JonStirling okay i've updated my code. Also i'm well aware of jQuery (which i don't want to use). I know there are other ways to make the http call but i figured i'd get my php sorted out before going any further as i'm far less familiar with php than i am with javascript — philr, Jan 21 '19 at 21:51

score 2 · Answer 1 · answered Jan 21 '19 at 21:52

2

There is no need to send the image as the response from PHP.

What you should do instead instead is return JSON with a URL to the image. Like this:

{
    "images": [{
            "url": "http://myaddress.com/image_of_cat.jpg"
        },
        {
            "url": "http://myaddress.com/image_of_cat.jpg"
        }
    ]
}

And then with javascript you just set the src attribute of the <img> tag with that URL.

Now you only need to set up a very simple server that serves images from a folder

answered Jan 21 '19 at 21:52

Borjante

9,767
6
35
61

2

wow this is really simple not sure how i didn't think of this. thanks a lot! – philr Jan 21 '19 at 21:59
i ended up accepting the other answer because while this is a perfectly valid alternative, the other answer actually demonstrates how to send images through php. Thanks for the alternative! upvoted your answer – philr Jan 23 '19 at 01:24

score 1 · Accepted Answer · answered Jan 21 '19 at 23:08

1

Does not answer OP's question. Answering for those googlers who actually WANT PHP to send the raw image instead of an image link:

<?php
/* Must be  done before headers are sent */
header('Content-Type: image/jpeg');
$path = 'myfolder/myimage.jpg';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
echo $base64;
?>

(Partially makes use of another stackoverflow answer on a different question on how to encode image, but if you have the string already encoded from somewhere else, that works as well can replaced the $base64 string )

answered Jan 21 '19 at 23:08

lilHar

1,735
3
21
35

1

so i made this the accepted answer because it is the answer that most accurately directly answers the question, despite both answers being valid alternatives. Thanks! – philr Jan 23 '19 at 01:16
Cool. As I wrote it, this is pretty much useless (maybe unless you're trying to obfuscate the image's location in a memory intensive way?) as it's pretty much presenting the exact same data to the user as you'd get by sending the image. That said, stuff could be tacked in that modified the image, like adding watermarks, including hidden messages, checking checksum values, etc. – lilHar Jan 23 '19 at 14:54

Sending images with php?

2 Answers2