I've created a function that rotates defined image. It works perfect in firefox, but in IE and Opera nothing happens - the image is reloaded but not rotated. Does anybody know why? Here goes the code:
function rotateImage($direction, $id, $angle) {
$dir = opendir($direction);
if ($img = imagecreatefromjpeg($_SESSION['files'][$id]['large'])) {
$width = imagesx ( $img );
$height = imagesy ( $img );
$rotate = imagerotate($img, $angle, 0);
imagejpeg($rotate, $_SESSION['files'][$id]['large'], 100);
}
else {
echo '<p>Error: image cannot be rotated</p>';
}
closedir($dir);
}
The problem is definitely not with the browser you are using as the rotation is done server-side.
You might be running into a caching issue or an issue with the code used to call that function.
Are you:
Using JavaScript to initiate a reload?
Your JavaScript code might be the issue here.
Sending the proper no-cache headers?
If not, you might be running into a situation where the image is cached on the browser, which is why you are not seeing your changes. Either send the proper Cache-control and Expires headers, or append a random identifier to the image url (?_=$x where $x = time() will work fine... Headers are preferred).
Sending the proper Content-type header?
Not sending the proper headers might cause erratic behavior in some browsers. You might want to try using header('Content-type: image/jpeg')
Sending only the image data without any extra characters?
Make sure you don't output anything else than the image. Your output stream must not have any extra characters, including whitespaces.
Try hit refresh! Or clear cache and reload.
This is because the image is saved in browsers cache, and browser know it has it, but it doesn't know it has been changed. One of the tricks is to save the image on the server side with randomly generated name.
I would suspect you aren't sending an appropriate Content-Type header for the image. Alternatively, the image may be slightly corrupted (commonly caused by spaces before/after the php tags in your source code). Save the image from Firefox on your hard drive, open it in a text editor (such as Editplus) and check it doesn't start or end with a space.
PHP is server side, so if it works on one browser the code works fine and the issue lies with the browser. I would assume that IE and opera are caching the image. If possible set the headers for the images so that they don't get cached:
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
Related
I'm struggling with what feels like a recent issue to my private php CMS when delivering images. I feel (but can't confirm) that this was working a few days ago, but doesn't now (note I recall a large Windows update between then and now).
When I run something like the following HTML:
<IMG BORDER=1 SRC='https://my....site.com/myPHPDocument.php?d=23362'>
<BR>(<a href='https://my....site.com/myPHPDocument.php?d=23362'>Click here to see full size</a>)
then in IE I get the [X] image error icon, BUT when I run Chrome for the same page then I see my images ok
The other strange thing here is that when I look at other images from my site in IE then not everything fails in the tags... some are ok... so it's not like the rendering code is completely wrong.
The PHP used to deliver the image is :
header("Pragma: ");
header("Content-type:".$extn);
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header('Content-Length: '.filesize($filenm));
header("Content-Disposition:attachment;filename=$externalNm");
if ( file_exists($filenm) ) {
$bufferlength = 65536;
$fp = fopen($filenm, "r");
while (!feof($fp))
{
$buffer = fread($fp, $bufferlength);
echo $buffer;
flush();
}
fclose($fp);
}
flush();
die();
I've tried this on IE9, 10 and 11 and they all show the [X]. Is it possible IE has tightened something that used to work 100% and now I find only works 30% of the time? Am I missing something in my headers (or something else)?
If the images are jpeg, Internet explorer uses the mime type image/pjpeg. You use pjpeg for IE and jpeg for other browsers.
header("Content-Type: image/pjpeg");
I'd start your investigation by removing the browser from the equation. The curl command line program is an excellent resource for debugging these sorts of questions. First, you can use it to look at the headers you're actually returning by using the -I option
curl -I https://my....site.com/myPHPDocument.php?d=23362
Then, you can use it to download the actual file and examine what's being downloaded.
curl https://my....site.com/myPHPDocument.php?d=23362 > file.png
Two quick guesses here
If you open file.png you'll see some PHP errors, or maybe an HTML page that renders an img tag (i.e. not a pure binary image)
Your Content-Type is incorrect.
I am trying to build a pixel that would track the current URL the user is on when they visit. I can use either JS (preferred) or a 1x1 image pixel. With JS I am assuming that I'd need to run an AJAX request to a PHP script to capture the info that I need and with an image pixel I am having issues getting the currently URL.
I also thought about URL encoding the current URL with JS and dynamically placing the image pixel with the encoded current URL as a query string to a PHP script, but that I can get to be very long.
If I am to go the AJAX route, which AJAX library can I use? JQuery is too bloated for this purpose.
Any other ideas?
You can write a script that creates and returns a .gif, .jpeg or .png image using PHP for tracking purposes using the GD library (which is often distributed with PHP in modern versions). If you don't have access to GD, you can always recompile PHP with GD enabled.
Example:
pixel.php (commented for the purposes of explanation):
<?php
// Create an image, 1x1 pixel in size
$im=imagecreate(1,1);
// Set the background colour
$white=imagecolorallocate($im,255,255,255);
// Allocate the background colour
imagesetpixel($im,1,1,$white);
// Set the image type
header("content-type:image/jpg");
// Create a JPEG file from the image
imagejpeg($im);
// Free memory associated with the image
imagedestroy($im);
?>
In a simple example, you can then call this tracking pixel using the following example URL in an email or other page:
<img src="http://example.com/pixel.php?a=value1&b=value2&c=value3">
Using variables:
Within your pixel.php you can then parse and interpret any $_GET variables that are passed to it within the image tag, simplistically:
if (isset($_GET['a'])) {
// (Do|log) act on a
}
if (isset($_GET['b'])) {
// (Do|log) act on b
}
if (isset($_GET['c'])) {
// (Do|log) act on c
}
Apply and repeat as you need, but you can be quite sophisticated about what you do and especially as you have access to quite a lot of information about the user through being able to set vars on the $_GET string.
A more applicable example might be:
<img src="http://example.com/pixel.php?userid=98798&campaign=302&last=8">
Tracking more than just $_GET variables:
You can also pick up much more information using PHP, such as:
// Server variables
$ip = $_SERVER['REMOTE_ADDR'];
$referer = $_SERVER['HTTP_REFERER'];
$useragent = $_SERVER['HTTP_USER_AGENT'];
$browser = get_browser(null, true);
etc...
and then perhaps insert into a tracking table in your database:
$sql = "INSERT INTO campaign_tracking
('when','campaign','last','ip','useragent')
VALUES
(NOW(),'$campaign','$last','$ip','$useragent')";
This is a(the) basic method used widely for tracking email marketing campaigns and specifically in PHP, but the same method is applicable using other scripting/programming languages and libraries - and for other purposes too.
Further and useful information on GD:
GD reference - on php.net
Here is another PHP implementation of a tracking pixel, from the Open Web Analytics project, which attempts to basically be a PHP clone of Google Analytics.
It returns a 1x1 transparent GIF image (without using a PHP image library!), with a no-cache header (important for accurate tracking), and flushes the output so you can continue processing the analytics without blocking the HTTP response (performance). It seems like a pretty advanced implementation, worth trying out.
<?php
ignore_user_abort(true);
// turn off gzip compression
if ( function_exists( 'apache_setenv' ) ) {
apache_setenv( 'no-gzip', 1 );
}
ini_set('zlib.output_compression', 0);
// turn on output buffering if necessary
if (ob_get_level() == 0) {
ob_start();
}
// removing any content encoding like gzip etc.
header('Content-encoding: none', true);
//check to ses if request is a POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// the GIF should not be POSTed to, so do nothing...
echo ' ';
} else {
// return 1x1 pixel transparent gif
header("Content-type: image/gif");
// needed to avoid cache time on browser side
header("Content-Length: 42");
header("Cache-Control: private, no-cache, no-cache=Set-Cookie, proxy-revalidate");
header("Expires: Wed, 11 Jan 2000 12:59:00 GMT");
header("Last-Modified: Wed, 11 Jan 2006 12:59:00 GMT");
header("Pragma: no-cache");
echo sprintf('%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%',71,73,70,56,57,97,1,0,1,0,128,255,0,192,192,192,0,0,0,33,249,4,1,0,0,0,0,44,0,0,0,0,1,0,1,0,0,2,2,68,1,0,59);
}
// flush all output buffers. No reason to make the user wait for OWA.
ob_flush();
flush();
ob_end_flush();
// DO ANALYTICS TRACKING HERE
Output 1px x 1px this way:
header('Content-type: image/png');
echo gzinflate(base64_decode('6wzwc+flkuJiYGDg9fRwCQLSjCDMwQQkJ5QH3wNSbCVBfsEMYJC3jH0ikOLxdHEMqZiTnJCQAOSxMDB+E7cIBcl7uvq5rHNKaAIA'));
Here's an extremely simplified tracking pixel written in PHP.
How a Tracking Pixel Works
A tracking pixel is like the most primitive beacon possible, and it operates by exploiting a fact of web pages: images are a separate request from the page.
If you are already able to run your JS code on someone else's page, you should just POST the data back to your server. No need to display a tiny pixel that will only get the same kind of data.
It is a similar problem with this effect, since a call to a function to execute a mark of when the email was seen or opened was introduced in the alt of the pixel, but it does not throw the action correctly.
<img src="https://datafeeds.baruwa.com/1x1spacer.gif" width="1" height="1" alt="Web Bug from https://devorpenguin.des1.net/module/cartabandonmentpro/FrontCartAbandonment?token_cart=87c83b8f77318a54fdd6be91aacc3574&id_cart=1002&action=visualize&wichRemind=1">
public static function visualize()
{
$wichRemind = Tools::getValue('wichRemind');
$id_cart = Tools::getValue('id_cart');
$token = Tools::getValue('token_cart');
if ($token == md5(_COOKIE_KEY_.'recover_cart_'.$id_cart)) {
$query = "UPDATE "._DB_PREFIX_."cartabandonment_remind SET visualize = 1 WHERE wich_remind = ".(int)$wichRemind." AND id_cart = ".(int)$id_cart;
Db::getInstance()->Execute($query);
}
header('Content-Type: image/png');
echo base64_decode('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=');
}
Using OpenPixel will take care of most of the heavy lifting if the scope of your project calls for it.
I have a php script acting as a random image generator. The script queries the database for the user's images, and returns the path to one, at random. Here is the portion of the code responsible for returning the image, once the path has been chosen.
header('Content-Transfer-Encoding: binary');
header('Content-Type: image/jpeg');
header('Content-Length: ' . filesize($path));
echo file_get_contents($path);
I am calling it from the client like so
image.src = "/database/getRandomImage.php";
Every time I refresh the page I get a new image at random. However, if I call getRandomImage.php multiple times for side by side images, they will all be the same image. If I add a random property to the call like so
image.src = "/database/getRandomImage.php?path=" + Math.random() * 100;
The pictures become random. I take this to mean that the browser is caching them based on the random property I passed. The problem is this property has nothing to do with the actual image. Two different images might get cached as the same image, and the same image might not be retrieved from the cache. Is there any way for getRandomImage.php to inform the browser about the picture it is sending back?
Why not have getRandomImage be a PHP function, which returns a path to the image. You can render the page out with the random image paths already filled in.
<img src="<? echo getRandomImage() ?>">
Then you can actually serve your images with real cache headers, and your bandwidth wont be getting hammered so hard.
Do this on the server side while the page is rendering, not after. Doing it after is more work and, as you are finding out, is more complicated too.
The caching has nothing to do with the PHP script; it happens at the browser.
Try adding this to the script, to try and force the browser to not cache it (from PHP website):
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
Just make randomImage.php redirect to a seeded version if it isn't present.
if (!isset($_REQUEST['seed']))
{
header("Location: randomImage.php?seed="+rand());
exit;
}
Feel free to make the randomizer more random.
Browsers expect that the same will always represent the same image. And I think that even headers that force no caching at all wont even stop the browser from reusing the image on the same page. So a image source that is different each time you call it is pretty counter intuitive.
Cache busting is probably your best bet. That means like you random hack there, although there is ways to do it better. For instance, appending an increasing integer to the current time. This way you never duplicate urls.
var count = 0;
var now = new Date().getTime();
imgs[0].src = "/database/getRandomImage.php?" + (count++) + now;
imgs[1].src = "/database/getRandomImage.php?" + (count++) + now;
imgs[2].src = "/database/getRandomImage.php?" + (count++) + now;
But really, you may want to rethink your strategy here, because it sounds a little fishy.
I have written the following PHP function but still get the prompt to download the file:
function navigateToBytes($contentType, $bytes){
header('Content-Type: ' .$contentType);
//header('Content-Transfer-Encoding: binary'); // UPDATE: as pointed out this is not needed, though it does not solve the problem
header('Content-Length: '.strlen($bytes));
ob_clean();
flush();
echo $bytes;
}
An example of calling the function:
navigateToBytes('image/jpeg', $bytes); // UPDATE: turns out this does work, using image/tiff for tiff images is when the browser does not display the image
where $bytes are the bytes as read from the file.
Apologies all - turns out I was having the problem because the images I was testing were TIFF's (with the Content-Type correctly set to image/tiff) when I used a JPEG the browser would display the image!
Ultimately it is up to the browser to decide whether it can display the Content-Type you are sending.
For the record the only headers I needed to change was
Content-Type,
I should set
Content-Length
too unless I set
Transfer-Encoding: chunked
Try the HTTP header "Content-Disposition: Inline", however some browsers may try to save the user from seeing binary data. Here is a random blog article on that HTTP header:
http://dotanything.wordpress.com/2008/05/30/content-disposition-attachment-vs-inline/
That seems like correct behavior to me. The browser is a viewport for humans to view things in. Humans, by and large, don't want to view binary data. What do you think should happen?
Random Advice: If there's a site that's doing what you want to do, use curl to sniff the headers they're sending.
curl -I http://example.com/path/to/binary/file/that/displays/in/browser
and then use the exact same headers in your own script.
As a start, get rid of things that do not exist in HTTP (Content-Transfer-Encoding).
Then get an HTTP tracing tool, such as the Live HTTP headers plugin for Firefox, and compare "your" headers with those received for a working image.
In doubt, post the HTTP trace here.
Okay excuse the cryptic subject.
I have a system which dynamically fetches image data and does some modification on the fly.
Essentially, missing out the unimportant bits, this is my code:
$File->Filename = "testimage.jpg";
$File->Open();
$FileData = $File->Read();
header('Content-Type: image/jpeg');
echo $FileData;
The only output on the page is $FileData. Okay. When I run the script as is, Firefox presents me with a blank page and Chrome and IE give me a 'missing picture' box.
However oddly enough, when I remove the Content Type declaration, I can see the raw image data just fine. I have tested this with several images, granted all of the JPEG type but it clearly loads up the different pictures just fine, as the raw data changes successfully, and matches the raw content of the image itself.
Anyone have any idea why it would be failing to just display the image at this point?
You need to give more information in order to let the browser handle it correctly (use the correct type and length):
header('Content-Length: '.strlen($FileData),true); // EDIT: inserted the strlen function as suggested by kgb
header('Content-Type: image/jpeg');
Try setting Content-Length appropriately. Remove the trailing ?> to make sure there is no whitespace at the end of the script and ensure that the starting it at the very start of your script.
i'll combine phant0m's and Thariama's answers ;):
header('Content-Length: '.strlen($FileData), true);
header('Content-Type: image/jpeg');
die($FileData);