We Keep Coding

Is it possible to run a PHP file with HTML on the server

Normally when you have a .PHP file and the client request it, the PHP code is run on the server and the HTML and JavaScript are sent to the client.
Question
Is it possible to have the server request a webpage (local) and run both the PHP code and the HTML with JavaScript on the server? I have created a single .html file that after 3 seconds of processing locally creates the image data for a thumbnail of the given video.
Why
I need to generate a thumbnail for a video. I used shared hosting and my hosting provider doesn't support for ffmpeg. You can, however, generate thumbnails using a canvas and JavaScript. I have already put a lot of pressure on the client. If this is possible, upload and download times would be significantly shorter than using the client.
Attempts
I've tried using file_get_contents(), but it doesn't run the code (Makes sense). Is there a way I could have it open and run for x seconds and then grab the contents?
I've tried using curl to get the file using this function here. I believe it is similar to my previous attempt in that it gets the file contents, but never executes them.
My final attempt was to use new DOMDocument(). I couldn't even get to loading the page though. First, I can't parse it with a video tag. It gives this error:
Warning: DOMDocument::load(): Specification mandates value for attribute controls in
file:\path\to\html\document.html, line: 53 in C:\path\to\php\document.php on line 50
If I were to remove the video tag (which is required), I get errors while parsing my JavaScript. So that attempt also did not work.
Is there a way that I could have PHP process the code (for something on the server) for x seconds before getting the contents? It would allow for time to generate the thumbnail data. If there is another way to do this without using ffmpeg on the server, that would be great.

So as I mentioned in comments, what I'm gonna explain is just an option (not the best one and just answering for your need of running html code!)
Where to do this?
Personally I rather to do this when the video is being uploaded by admin's browser and the best thing is that you can do this as a part of the posting procedure.
So in the page that you want this process to be done, put an invisible iframe like this.
<iframe id="myIframe" style="display: none;"></iframe>
How to begin the process?
I don't know the way you use to upload the videos (and it really is not that important!) but let's assume you want to use formdata. After the video is uploaded you need to know something unique to address the video (let's say an id). So after the video is uploaded, we can recive a code like id:20, initiateThumbnail:true as the result json data. Then we can simply use that hidden iframe to be the browser you've been asking for like this:
$("#myIframe").attr("src","dothething.php?video=20");
Now do what ever you wanted to do in it and change it's content after it's done. Now you need to wait for the result!
$('#myIframe').load(()=>{
let result = $("#myIframe").contents();
// checking result!
});
As you have already thought about, you can handle any errors by processing the result.
Notes
The event listener we used for iframe (iframe.load) fires when you initiate making the thumbnail as well. So be careful with the process of checking result (content of that iframe!)
If you don't use ajax or formdata, simply the action of your form is what I used as iframe.
One question? What happens if network connection goes down during this process? Simple answer! You can check in so many ways that the thumbnail exists or not. If not you can create it once that user requests for it in his browser and upload it back to server and save it for ever (as you did it in admin's panel!)

I think there isn’t another way to generate thumbnail on php server than with ffmpeg.
The only thing you can do, I suppose, is to force canvas generation on page load if you aren’t already doing it.
Anyway you are trying to do something wrong. Php doesn’t evaluate the html code, it’s just a preprocessor and not an interpreter like the browser. You can wait all the time of the world, but you’ll never get the content of the image that only a browser will generate.

How can I send multiple images created by PHP directly to JS?

I have a PHP script that generates images. At this moment with every request PHP creates a temporary directory and fills it with the created images, then it sends the links to JS, which displays them in the browser in a special order.
Is there any way to pass these images directly from PHP to JS without a temporary directory?
I don't want to use temporary directories because it takes space and resources of server and I have to check that images download has been completed before deleting them.
I am thinking on using Json encoding and decoding but I don't like this because it's time consuming.
Is there another way to send images directly from PHP to JS?
There is a way to work with using src to php script with headers:
Using PHP to send a certain image
or
How to generate image file using this PHP function?
But this I could only work with one image per request.
I mean - if I have 5 or 6 divs with images I have to make 5 or 6 requests from JS to my php script.
Is there a way to send multiple images from PHP to JS?

My first idea would be to encode those images with base64_encode and pass that encoded data to your JavaScript. With this approach, you don't have to save those images anywhere.
More information on displaying base64 encoded images: Base64 Encoding Image

What you can do to not overload your server is to use an image hosting external website, like imgur, giphy, etc. This will scale the image for you in different size, see their api.
Here I am going to share a little hack, to host permanently contents into the internet archive. it is easy to implement from php.
Please don't use it for high traffic.
1/ Host your content on your site, create a url_link.
2/ Post your link to archive.org:
https://web.archive.org/save/*url_link*
3/ Response is a link on the form:
https://web.archive.org/web/20180XXXXXX626if_/*url_link*
4/ Modify the link, remove if_ this is the permanent link for the next centuries.
https://web.archive.org/web/20180XXXXXX626/*url_link*
5/ Delete content from your server

An image in the HTML img tag is to be set as the value of file input of HTML while clicking the img tag

<img class='preview' src='preview.png'>
This is an input for image upload:
<input type='file' class='img-upload' accept='image/*'>
When I clicked on the preview image(<img class='preview' src='preview.png'>), I have to change the value of the file input (<input type='file' class='img-upload' accept='image/*'>). The value of the file input should be the preview image.

Short answer: you cannot.
Long answer: The problem is that the file inputs are very sandbox'ed and will not allow user scripts to change their value. The goal is to make sure the user needs to click and acknowledge that he is sending a file from his computer.
Now, the user cannot send the image he clicked on mostly because it is not on his computer (well, technically yes, but even then he would need to know where it is stored and choose it by manually going over the folder). Another thing is, why would you want him to send over a file that you have served him? You could simply get the name of the file or an ID of any sort and use that internally.
Let's take the example of an user avatar. The user gets the possibility to pick between 10 different "preset" pictures, or to upload his own. What you'd do is have 2 form fields, one for the uploaded picture and one for the chosen preset. On server side you would see if the user uploaded a picture, and use that one. If not, use the picture he chose from your server.
I hope I got your question right...
EDIT: If you really, really, really needed to upload the displayed picture, you could get the image data (with ajax I guess), store it into a Blob and send it for upload.
But that has some serious drawbacks. And I think you'll be limited by crossdomain policies so basically you'll only be able to access files that your server can access directly...
Even if you got all that covered, it would be a painfully slow process for the user while all that is required is just sending the name of the picture and the server does the rest.

input type="file" can only be set by the user. Not by a script (not HTML, nor javascript, ...).
Every exe on a windows pc has the capacity to access your files. Including renaming, deleting, encrypting, ... them. For example that's what Wannacry (randsomware) does.
(similar for Mac and Linux, I guess)
A webbrowser is an executable, thus has all those capacities. For security reasons most of these features are turned off, on purpose.
Long ago I wrote a program in C++ (or C#, not sure), with Visual Studio. VS has a webbrowser component. The purpose was to upload multiple albums of photos to a website, but the exe on my pc did have the capacity to use a script to set the input type="file".
So my program could read all subfolders, find all images, automatically upload them, and then the php server saved the albums/images.
In order to stop people like you and me from doing these kind of things, real webbrowsers disabled all these abilities.

how to secure img src path when user clicks on view source using javascript?

How to secure the src path of the image when clicks on inspect element so that user should not get to know about the actual src path..please help me with the solution and it should be done with javascript only no other tags should be used.

You can convert image into base 64 data URIs for embedding images.
Use: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Code sample:
.sprite {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}

This is commonly done server-side, where you have an endpoint that serves the image file to you as bytes...
You can store the images in a private location on the server where IIS/<your favourite web server> doesn't have direct access to it, but only a web app, running on it, with the required privilege is authorized to do so.
Alternatively people also "store" the images in the database itself and load it directly from there.
In either case, the response which has to be sent back has to be a stream of bytes with the correct mime type.
Edit:
Here are a couple of links to get you started if you are into ASP.NET:
http://www.codeproject.com/Articles/34084/Generic-Image-Handler-Using-IHttpHandler
http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5 <- this sample actually does it from a database.
Don't let the choice of front-end framework (asp.net, php, django, etc) hinder you. Search for similar techniques in your framework of choice.
Edit:
Another way if you think html5 canvas is shown here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
However you run into the same problem. Someone can view the image url if they can see the page source. You'll have to revert to the above approach eventually.

Force image caching with javascript

I am trying to clone an image which is generated randomly.
Although I am using the exact same url a different image is load. (tested in chrome and firefox)
I can't change the image server so I am looking for a pure javascript/jQuery solution.
How do you force the browser to reuse the first image?
Firefox:
Chrome:
Try it yourself (maybe you have to reload it several times to see it)
Code:
http://jsfiddle.net/TRUbK/
$("<img/>").attr('src', img_src)
$("<div/>").css('background', background)
$("#source").clone()
Demo:
http://jsfiddle.net/TRUbK/embedded/result/

You can't change the image server if it isn't yours, but you can trivially write something on your own server to handle it for you.
First write something in your server-side language of choice (PHP, ASP.NET, whatever) that:
Hits http://a.random-image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes and downloads it. You generate a key in one of two way. Either get a hash of the whole thing (MD5 should be fine, it's not a security-related use so worries that it's too weak these days don't apply). Or get the size of the image - the latter could have a few duplicates, but is faster to produce.
If the image isn't already stored, save it in a location using that key as part of its filename, and the content-type as another part (in case there's a mixture of JPEGs and PNGs)
Respond with an XML or JSON response with the URI for the next stage.
In your client side-code, you hit that URI through XmlHttpRequest to obtain the URI to use with your images. If you want a new random one, hit that first URI again, if you want the same image for two or more places, use the same result.
That URI hits something like http://yourserver/storedRandImage?id=XXX where XXX is the key (hash or size as decided above). The handler for that looks up the stored copies of the images, and sends the file down the response stream, with the correct content-type.
This is all really easy technically, but the possible issue is a legal one, since you're storing copies of the images on another server, you may no longer be within the terms of your agreement with the service sending the random images.

You can try saving the base64 representation of the image.
Load the image in an hidden div/canvas, then convert it in base64. (I'm not sure if a canvas can be hidden, nor if it is possible to convery the img using html4 tag)
Now you can store the "stringified" image in a cookie, and use it unlimited times...

The headers being sent from your random image generator script include a Cache-Control: max-age=0 declaration which is in essence telling the browser not to cache the image.
You need to modify your image generator script/server to send proper caching headers if you want the result to be cached.
You also need to make sure that the URL stays the same (I didn't look at that aspect since there were tons of parameter being passed).

There seems to be two workarounds:
If you go with the Canvas method, see if you can get the image to load onto the Canvas itself so that you can manipulate the image data directly instead of making a 2nd http request for the image. You can feed the image data directly onto a 2nd Canvas.
If you're going to build a proxy, you can have the proxy remove the No-Cache directive so that subsequent requests by your browser use the cache (no guarantees here - depends on browser/user settings).

First off, you can "force" anything on the web. If you need to force things, then web development is the wrong medium for you.
What you could try, is to use a canvas element to copy the image. See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images for examples.

Tell it to stop getting a random image, seems to work the way you want when I add this third replace call:
// Get the canvas element.
var background = ($("#test").css('background-image')),
img_src = background.replace(/^.+\('?"?/, '').replace(/'?"?\).*$/, '').replace(/&fromrandomrandomizer=yes/,'')

try:
var myImg = new Image();
myImg.src = img_src;
and then append "myImg" to where you want:
$(document).append(myImg);

I did this with your fiddler scripts and got the same image every time
#test {
background:url(http://a.random-image.net.nyud.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes);
width: 150px;
height: 150px;
}
note the .nyud.net after the domain name.