Run script when image is loaded

Question

Is there a way to run code when an image is loaded?

For example when if my image is hosted at www.mydomain.com/image.png and if someone executes this link image will be displayed as this is an image file. But, can I run a set of code when someone trying to view an image?

Like.

When I open run www.mydomain.com/image.png it should perform something like

<?php
  mail("myemail@mydomain.com", "image opened", "image opened by".$Server['addr']);
?>

I found there are multiple such services offered online but I am unable to sort out how to execute a code file when image file is trying to be executed.

Can anyone give me a brief idea how this will workout? I can code on my own a

See http://stackoverflow.com/questions/900207/return-a-php-page-as-an-image. You'll need to set up your webserver to handle `.png` files with the php interpretter. — RoadieRich, Aug 12 '13 at 14:25
@RoadieRich - Thanks for your response. That's a relevant question but I think there is something more in my part. In the linked question OP asked file.php?img=1 whereas mine is running an image file. — Kerry, Aug 12 '13 at 14:31
You can set up [php to handle any file type you like](https://kb.mediatemple.net/questions/145/). In this situation, set php to handle `.png`s, give your script a .png extension, and put the actual image somewhere inaccessible to the public. — RoadieRich, Aug 12 '13 at 14:34
@RoadieRich - Well, I need to do some research work on this. May be this will work. — Kerry, Aug 12 '13 at 14:36
If you've got a number of images requiring this, I'd recommend using something like `images.php?f=image.png` - otherwise you'd need to duplicate the script for every image. Another option is to use something like `mod_rewrite` to translate `mydomain.com/images/image.png` into `mydomain.com/images.php?f=image.png`. See http://net.tutsplus.com/tutorials/other/a-deeper-look-at-mod_rewrite-for-apache/#getting_a_feel_for_it for an example of almost exactly this. — RoadieRich, Aug 12 '13 at 14:47

Mohsenme · Answer 1 · 2013-08-12T14:52:26.480

0

Yes use onload event of your image element.

Client-side:

<img src="..." onload="JavaScript_Code">

or

img = document.getElementById("Image_Id")
img.onload = function(){SomeJavaScriptCode};

Server-side (index.php):

<?php
// do some works with the $_Get["path"]
header('Content-Type: image/png');
readfile($_Get["path"]);
exit;

and image url will be *index.php?path=Path_to_png_image_file* or you can do URL_Rewriting to remove index? part of URL

edited Aug 12 '13 at 14:52

answered Aug 12 '13 at 14:31

Mohsenme

1,012
10
20

How can you write onload function to a PNG file? I said I wanna call the file as www.mydomain.com/image.png – Kerry Aug 12 '13 at 14:32
This only works if the image is loaded on that webpage in a browser with javascript enabled. Loading the image any other way - for instance, if it gets shared on social media - will bypass the code. It depends on whether that's what @Kerry wants. – RoadieRich Aug 12 '13 at 14:41
Just now read an article on Google that PHP code can be executed using GIF file. Just wondering if anyone can help me how it can be achieved. Hope I need to ask a new question. – Kerry Aug 12 '13 at 14:44
I thought you are loading image into your web document, so I did it the client-side way. You should put your image behind a server-side script. – Mohsenme Aug 12 '13 at 14:45
@Kerry you can assign png file types with php application server in **Apache configuration** file, but I think it's not a good idea to assign all png files with php handler! – Mohsenme Aug 12 '13 at 14:59

RoadieRich · Answer 2 · 2013-08-12T15:25:16.007

After doing a little browsing, it looks like the best way to handle this may be using mod_rewrite, if it's available.

Set up a rule like

# Enable Rewriting  
RewriteEngine on  

# Rewrite user URLs  
#   Input:  images/image.png/  
#   Output: images.php?f=image.png  
RewriteRule ^images/(\w+\.png)/?$ images.php?f=$1

Then, use the example given in the php documentation to serve the image:

<?php

$filename = $_GET['f'];

if (!file_exists($filename))
{
    header('HTTP/1.0 404 Not Found');
    include('image404.php'); //or something similar if you want a nice error message
    exit();
}
else
{
    mail("myemail@mydomain.com", "image opened", "image opened by".$Server['addr']);

    $fp = fopen($_GET['f'], 'rb');

    header("Content-Type: image/png");
    header("Content-Length: " . filesize($name));

    fpassthru($fp);
}

Note that it requires you to serve the file from a subdirectory like www.mydomain.com/images/image.png, but it avoids the problem of setting all png files to be handled by php.

You might want to consider if extra sanitization is needed: for instance, you might want to remove slashes and .. in the filename - how mod_rewrite handles them would need checking.

Run script when image is loaded

2 Answers2