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?
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
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 )
Related
I wan't to know "How to show only image on the url not other content even html?". Like see this url link of Image. This url only shows image not any other content on webpage and also see the url of website it's dynamic url not a specific image url.
So, how to achieve that?
You simply make the request to the URL of the image.
For example, if your image is called test1.png and you have it in a directory called images, you would make the URL like this:
https://your.domain/images/test1.png
If you want to hide the full path to the images and serve them through a page (so you have some control over the request for some reason), you can do something more like the following. Let's call the PHP page img.php. And the request could be like
https://your.domain/img.php/test1
<?php
$request = './default.png';
if (isset($_SERVER['PATH_INFO'])){
$request = './images'.$_SERVER['PATH_INFO'].'.png';
if (! file_exists($request)){
$request = './default.png';
}
}
// we now know we have a valid request and the file was found
header('Content-type: image/png');
header('Content-Length: '.filesize($request));
echo file_get_contents($request);
exit;
?>
With this approach you could have any number of images in the /images/ directory and serve them if they match the request.
The website in your sample maybe using the same $_SERVER['PATH_INFO'] info approach but would be dynamically creating the image using the passed variables and explode('/',$_SERVER['PATH_INFO']) along with imagecreate()
A very quick hack version would be something like the following. The request would be like this:
https://your.domain/test.php/100x50/919/222
And the very quick code, with almost no error checking could be:
<?php
function hexToColor($hx){
$rgb = array(0,0,0);
if (strlen($hx) == 3){
$rgb[0] = hexdec($hx[0].$hx[0]);
$rgb[1] = hexdec($hx[1].$hx[1]);
$rgb[2] = hexdec($hx[2].$hx[2]);
} else {
$rgb[0] = hexdec($hx[0].$hx[1]);
$rgb[1] = hexdec($hx[2].$hx[3]);
$rgb[2] = hexdec($hx[4].$hx[5]);
}
return $rgb;
}
// default values
$sizeW = 100;
$sizeH = 100;
$bg = array(0,0,0);
$fg = array(255,255,255);
if (isset($_SERVER['PATH_INFO'])){
$opts = explode('/',substr($_SERVER['PATH_INFO'],1));
$bgSet = false;
foreach($opts as $k => $v){
// check for a width x height request
if (strpos($v,'x')){
$tmp = explode('x',$v);
$sizeW = $tmp[0];
$sizeH = $tmp[1];
} elseif ($bgSet){
// must be a foreground request
$fg = hexToColor($v);
} else {
$bg = hexToColor($v);
$bgSet = true;
}
}
}
header("Content-Type: image/png");
$im = #imagecreate($sizeW,$sizeH)
or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im,$bg[0],$bg[1],$bg[2]);
$text_color = imagecolorallocate($im,$fg[0],$fg[1],$fg[2]);
imagestring($im,1,5,5,$sizeW.' x '.$sizeH,$text_color);
imagepng($im);
imagedestroy($im);
exit;
?>
But I would strongly recommend a heap of error checking before using that code!
As I understand you want to dynamically update the picture.
You can see that on their main website they created a form for the entered values:
After that, on the picture URL there are all the values you need to display this image:
https://dummyimage.com/600x400/8a1a8a/232dba&text=xzcxzcnbngh
which is this image:
what you can't see is their server side, which takes the parameters 600x400/8a1a8a/232dba&text=xzcxzcnbngh, creates a picture using their server and returning it to you.
I'll suggest you to create a server side that will return a picture and text based on the given parameters.
based on your server you will need to find out how to create the picture and return it.
As you can see here, I just modified the "src" value of the and it changed the text on the photo.
which means that their server receives the request and send back the image.
If you want a simple solution you could just send back those parameters to your page scripts, and create this image element using JavaScript.
That way, your html code will be clean without even the img element tag.
create your img in JS and send put it on the html body.
Image placeholder that’s updated by scripting
HTML code:
<img id="abc" src="">
Javascript code:
var abcImage = document.getElementById('abc');
abcImage.src = 'https://dummyimage.com/600x400/000/fff';
Edit: Update - Solution
So I have achieved what I needed to do: Write data to file on the server. I am not exactly sure how things work but it seems that:
xhttp.send(data);
does not send all the data in a FormData variable but rather only the data with the "key" "data". (Sorry if I have the terminology wrong here.) So what I did is I took my object "userData" and applied the following:
userStringData = JSON.stringify(userData);
I then put the userStringData into a FormData variable as follows:
var data = new FormData();
data.append("data" , userStringData);
This then successfully wrote to the file on the sever. In the file I only had userStringData and not the "key" "data".
In my PHP file I also included a new line after every write so that each userString data would be on a new line:
if(!empty($_POST['data'])){
$data = $_POST['data'];
$fname = "users.txt";
$file = fopen("./AJG_Data/".$fname, 'a');
fwrite($file, $data);
fwrite($file, "\r\n");
fclose($file);
So this is working for me now. Thanks to those who offered advice and assistance.
Edit: Update:
Objective: To write data to the server using AJAX and PHP. (Please refer to original question below if necessary)
Thanks to ADyson's comments I have made a lot of progress. I have learnt that an XMHHttprequest is the way to make an AJAX request to the server. I have this code:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let successString = `Thank you ${userData.athlete.firstname} you have successfully granted permission to read your data.`
document.querySelector("#message-0").innerHTML = successString;
}
};
xhttp.open("POST","/path_to_my_php_file/file_write.php", true);
xhttp.send(data);
}
On the server side I have this in my php file:
<?php
$dir = 'AJG_Data';
// create new directory with 744 permissions if it does not exist yet
// owner will be the user/group the PHP script is run under
if ( !file_exists($dir) ) {
mkdir ($dir, 0744);
}
file_put_contents ($dir.'/test1.txt', 'Hello File');
if(!empty($_POST['data'])){
$data = $_POST['data'];
$fname = "users.txt";
$file = fopen("./AJG_Data/".$fname, 'w');
fwrite($file, $data);
fclose($file);
}
?>
The directory creation section above is not necessary it was part of my trouble shooting.
The above works perfectly if I send simple FormData created as follows:
var data = new FormData();
data.append("data" , "the_text_you_want_to_save");
The problem I have is that when I try to send more complex FormData. It doesn't work. It doesn't recognise my FormData and it doesn't get past this if statement:
if(!empty($_POST['data']))
I have checked my FormData using this code:
for (var pair of data.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
The above code returns the following:
token_type, Bearer
expires_at, 12345678910
expires_in, 1234
refresh_token, 1234567890abcefg...
access_token, 1234567890abcdefg...
athlete[id], 1234567
athlete[username], joe_soap
athelete[resouce_state], 2
athlete[firstname], Joe
...
...
athelete[created_at], 2017,01-03T16:07:37Z
...
...
athlete[profile], https://some.web.address/larg.jpg
So as far as I can tell I have good FormData but nothing gets written on the server side.
How can I correct this?
Thank you.
The original question follows below.
I have successfully retrieved data from the Strava API using JavaScript code. I have the data stored in a variable as a JavaScript object. I want to write the data to a file on the server.
I have spent hours searching the web and I can't find a solution. It seems this may be possible using ajax or jQuery but I can't find a simple step by step explanation of how to do this.
Bottom line: I want a simple way to write data to file on the server using JavaScript or something related to JavaScript that is quick and easy to implement. Assuming I can successfully write to file I will later want to read from file.
You would need another file on the back end, which would actually do the writing. I'll assume PHP. I'd recommend base64 encoding the data, and storing it encoded to save time.
Javascript:
if (window.XMLHTTPRequest) {
var xhttp = new XMLHTTPRequest();
} else {
var xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//Process output, get result text with this.responseText, decode base64, and parse JSON
alert(JSON.parse(window.atob(this.responseText)));
}
}
xhttp.open("POST", "file-load.php?key=" + window.btoa(JSON.stringify(value)), true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhttp.send();
PHP:
<?php
$key = $_POST['key'];
file_put_contents("storage.txt", $key); //Set file contents
Or, if you want to append it:
<?php
$key = $_POST['key'];
$current = file_get_contents("storage.txt");
file_put_contents("storage.txt", $current . "\n" . $key);
To read the file, just use the same setup as before for javascript, but instead of file-load.php, use file-read.php:
echo file_get_contents("storage.txt");
Use the onreadystatechange to read the output.
I would ike to find a solution for downloading a video/audio from a URL when I click on a HTML button.
One special point: The URL its external (so I do not have any chance to touch it) but I would like to specify the filename before the downloading starts.
I tried it over PHP, but im not sure if this method is the best/simpelst one. Because I have to define few headers, which are currently not working for a (mp4) file.
<?php
if (isset($_GET['title'], $_GET['link'])) {
$FileName = $_GET['title'];
$Link = $_GET['link'];
$ContentType = get_headers($Link, 1)["Content-Type"];
header('Content-disposition: attachment; filename="' . $FileName . '"');
header('Content-type: ' . $ContentType . '');
readfile($Link);
};
?>
Questions:
What do I wrong? I do always receive a 0kb file.
is there a more simple way to do it over JS or jquery?
What if its an Audio only URL that I want to download. Can I use same headers?
Looks like you've forgotten to include the protocol (ie https://) on those links. You'll also need to URL encode the parameter in your HTML so you don't lose any query parameters.
For example, to use https://example.com/example?test123, you'll want
href="download.php?link=https%3A%2F%2Fexample.com%2Fexample%3Ftest123"
Producing that encoded parameter can be done via...
urlencode() in PHP
<?php $link = 'https://example.com/example?test123&HERE-is-the-real-Content'; ?>
Download
encodeURIComponent() in JavaScript
let link = 'https://example.com/example?test123&HERE-is-the-real-Content'
let a = document.createElement('a')
a.href = `download.php?title=Whatever&link=${encodeURIComponent(link)}`
a.textContent = 'Download'
or, if you're building HTML strings (not recommended)...
const input_URL = 'https://...'
html += `Download`
Note, I'm using template literals in these JS examples.
You should also make sure the remote URL is valid. For example
$headers = get_headers($Link, 1);
if (strpos($headers[0], '200 OK') === false) {
http_response_code(404);
exit;
}
I want to take the image data from my canvas on the client and save it as a .png on my server.
This is the code on my client that gets the image data from the canvas and sends it to saveImage.php:
function render()
{
var imageData = ctx.canvas.toDataURL("image/png");
var postData = "imageData="+imageData;
var ajax = new XMLHttpRequest();
ajax.open("POST","saveImage.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.onreadystatechange=function()
{
console.log(ajax.responseText);
}
ajax.send(postData);
}
And this is what saveImage.php looks like:
<?php
if(isset($_POST["imageData"]))
{
$imageEncoded = $_POST["imageData"];
$imageDataExploded = explode(',', $imageEncoded);
$imageDecoded = base64_decode($imageDataExploded[1]);
$filename = time()."image".mt_rand();
$file = fopen("./".$filename.".png","wb");
fwrite($file, $imageDecoded);
fclose($file);
echo $filename;
exit();
}
?>
The code actually works fine, my problem is just that the images that gets created are faulty in some way.
When I try to open one, windows says that it cant show me the image because it doesn't support the format? even though its a .png?
what am I doing wrong here?
You should be encoding your data with encodeURIComponent() before including it in POST data.
You should also be using a framework like jQuery to account for browser differences. I guarantee that code will not work the same in all browsers.
On the PHP, try looking into file_put_contents() for writing data. Much quicker to type!
Have you checked what is actually being sent over HTTP? $imageEncoded probably starts with data:image/png;base64,xxxxx
Strip everything up to the comma after base64:
https://stackoverflow.com/a/15153931/3766670
I don't know if I missed something but I can't receive an image (binary) in javascript. I can do the same in iPhone and Android(with another cose, of course), but not if I'm using javascript.
SCENARIO:
Server Side
I have a server where the image is stored.
Code: (test1.php)
$image_url = 'http://weburbanist.com/wp-content/uploads/2011/11/lorem-ipsum.jpg';
$bin = file_get_contents($image_url);
echo $bin;
Client Side (Javascript)
I ask to the server, via URL GET/POST, the image, but I can't receive it in Javascript using AJAX request. I want to store it in a .
Code:
var activeXhr = new XMLHttpRequest();
activeXhr.open('GET', 'test1.php', true);
activeXhr.onreadystatechange = function()
{
if(activeXhr.readyState == 4){
var bin_img = activeXhr.responseText;
var dataURL="data:image/jpeg;base64,"+bin_img;
$('#test_img').attr('src',dataURL);
}
};
activeXhr.send(null);
PROBLEMS:
I can't convert this data received in BASE64 or using btoa (returns empty)
QUESTION:
How I can receive an raw image in JAVASCRIPT?
As you do already use jQuery, why not using its Ajax features for requests?
This is also much shorter:
$.get('test1.php').done(function (r) {
// r is your raw image data;
});
Also would it be appropriate to set 'Content-Type' header in php:
<?php
$image_url = 'http://weburbanist.com/wp-content/uploads/2011/11/lorem-ipsum.jpg';
$bin = file_get_contents($image_url);
header('Content-Type: image/jpeg');
die($bin); // use die/exit for safer output
Did you consider serving Base64 data from php like this:
die(base64_encode( $bin ));