Download picture from database to display via JavaScript? - php

Question

I am developing mobile applications, and I was thinking, if I need to download a picture from a server, I cannot actually run the PHP natively (I am using a PhoneGap type setup), so how could I download a picture from a database, run it though JavaScript and then display it to the user?
I would imagine something like:
Ajax request,
Return HTML string of binary data
Do some stuff to that?
Or
Ajax request,
Return a HTML string of reference to the picture, for example: picture1.jpg.
In JavaScript, write something like document.write <img src="http://blahh/img/"+imagePath
I'm not sure what the best way to do this is.

Answer 1

To my mind, the simplest way to dynamically load external pictures is to get a JSON object from a PHP script containing the picture URL (like http://www.example.com/pictures/getPicture/YOUR_PICTURE_ID).
Server side
<?php
$pictureUrl = 'http://example.com/pictures/picture.jpg'; //You can get it with a database query
$pictureName = 'Foo';
$pictureAltText = 'Bar';
// You can do some stuff here.
// At the end of the script, write result.
echo json_encode(compact('pictureUrl', 'pictureName', 'pictureAltText'));
?>
Client side
<script type="text/javascript">
// With jQuery
$.getJSON('http://www.example.com/pictures/getPicture/YOUR_PICTURE_ID', function(data){
console.log(data.pictureUrl, data.pictureName, pictureAltText);
var img = new Image();
img.src = data.pictureUrl;
img.setAttribute('alt', data.pictureAltText);
img.onload = function(){
// Displaying picture when download completed
$(img).appendTo('body');
}
});
</script>
If you don't use jQuery, you have to use XMLHttpRequest to get the JSON encoded response and to parse it (you can see the MDN documentation at https://developer.mozilla.org/en-US/docs/JSON).

Answer 2

You can do this, but not purely in JavaScript.
Since you mentioned PHP, I will go in that direction:
make table in database in which you will store all images. You need
to have some kind of image_content field and load every image in
some baseline64 encoder like:
http://www.motobit.com/util/base64-decoder-encoder.asp. And store
returned string into that image_content field.
Or you can write some script that will convert all images you want
to Base64 directly in PHP by using http://php.net/manual/en/function.base64-encode.php.
make a PHP file. For example, giveme_encoded_img.php in that file you
need to have one parameter in the URL like gimme_encoded_img.php?image_name=header_bg.
Then get image_name with $_REQUEST and do a MySQL query with that
data in the WHERE statement so that you can select an encoded image string
from the database.
After that, just print it.
When you do an Ajax request to a file above, just update the desired
image src with the response. The best way for doing this is to take the response
and get some element by id, like
var header_bg = document.getElementById('header_bg'); header_bg.src
= response;
The final HTML needs to look something like this:
img alt="Embedded Image" id="header_bg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."
Baseline64 embedding is really good, especially if you need to embed images in emails, then a lot of email clients show them by default instead of hiding the remote images from your server.
I hope I was clear enough.
Still this is not a purely JavaScript solution.