i got image url saved in my database.i am using php and mysql.
Some images can be displayed but others are restricted.At the moment restricted image show up broken on my site.
I only which to display non restricted images.
url for image that can be shown is
http://images.icecat.biz/img/gallery/16678932_9061.jpg
restricted image is
http://images.icecat.biz/img/gallery/8622798_7908.jpg
i have tried getimagesize but cant seem to be having any luck.
kind regards
nafri
file_exists() doesn't work across domains. Server side can be done like:
$url = 'http://images.icecat.biz/img/gallery/16678932_9061.jpg';
$header = get_headers($url, 1);
if(strpos( $header[0],'200') === false){
// do what ever
}
EDIT: fixed for 200 response. Better use curl though, faster it is
If you're happy to handle this on the client side, then you could use javascript to deal with this:
You can use handle the onError event to replace the image or do something else in the event that the image cannot be displayed.
See this answer for an example.
I'm using an external web service that will return an image URL which i will display in my website, For example :
$url = get_from_web_service();
echo '<img url="'.$url.'" />';
everything is working fine except if i have 100 images to show then calling the web service become time & resources consuming.
//the problem
foreach($items as $item) {
$url = get_from_web_service($item);
echo '<img url="'.$url.'" />';
}
So now i'm considering two options:
//Option1: Using php get_file_contents():
foreach($items as $item)
{
echo '<img url="url_to_my_website/get_image.php?id='.$item->id.'" />'
}
get_image.php :
$url = get_from_web_service($id);
header("Content-Type: image/png");
echo file_get_contents($url);
//Option2: Using ajax:
echo '<img scr="dummy_image_or_website_logo" data-id="123" />';
//ajax call to the web service to get the id=123 and get the url then add the src attribute to that image.
THOUGHTS
First option seems more straight forward, but my server might be
overloaded and involved in every single image request.
Second option it's all done by browser & web service so my server is not involved at all. but for each image i'm making 2 calls 1 ajax call to get the image URL and another one one to get the image. so loading time might be vary and ajax calls might fail for large number of calls.
Information
Around 50 Images will be displayed in that page.
This service will be used by around a 100 user at a given time.
I have no control over the web service so i can't change its functionality and it doesn't accept more than 1 image ID for each call.
My Questions
Any better option i should consider?
If not, which option should I follow? and most important why i should follow that one?
Thanks
Method 1: Rendering in PHP
Pros:
Allows for custom headers that're independent of any server software. If you're using something that's not generally cached (like a PHP file with a query string) or are adding this to a package that needs header functionality regardless of server software, this is a very good idea.
If you know how to use GD or Imagick, you can easily resize, crop, compress, index, etc. your images to reduce the image file size (sometimes drastically) and make the page load significantly faster.
If width and height are passed as variables to the PHP file, the dimensions can be set dynamically:
<div id="gallery-images">
<noscript>
<!-- So that the thumbnail is small for old mobile devices //-->
<img src="get-image.php?id=123&h=200&w=200" />
</noscript>
</div>
<script type="text/javascript">
/* Something to create an image element inside of the div.
* In theory, the browser height and width can be pulled dynamically
* on page load, which is useful for ensuring that images are no larger
* than they need to be. Having a function to load the full image
* if the borwser becomes bigger isn't a bad idea though.
*/
</script>
This would be incredibly considerate of mobile users on a page that has an image gallery. This is also very considerate of users with limited bandwidth (like almost everyone in Alaska. I say this from personal experience).
Allows you to easily clear the EXIF data of images if they're uploaded by users on the website. This is important for user privacy as well as making sure there aren't any malicious scripts living in your JPGs.
Gives potential to dynamically create a large image sprite and drastically reduce your HTTP requests if they're causing latency. It'd be a lot of work so this isn't a very strong pro, but it's still something you can do using this method that you can't do using the second method.
Cons:
Depending on the number and size of images, this could put a lot of strain on your server. When used with browser-caching, the dynamic images are being pulled from cache instead of being re-generated, however it's still very easy for a bot to be served the dynamic image a number of times.
It requires knowledge of HTTP headers, basic image manipulation skills, and an understanding of how to use image manipulation libraries in PHP to be effective.
Method 2: AJAX
Pros:
The page would finish loading before any of the images. This is important if your content absolutely needs to load as fast as possible, and the images aren't very important.
Is far more simple, easy and significantly faster to implement than any kind of dynamic PHP solution.
It spaces out the HTTP requests, so the initial content loads faster (since the HTTP requests can be sent based on browser action instead of just page load).
Cons:
It doesn't decrease the number of HTTP requests, it simply spaces them out. Also note that there will be at least one additional external JS file in addition to all of these images.
Displays nothing if the end device (such as older mobile devices) does not support JavaScript. The only way you could fix this is to have all of the images load normally between some <noscript> tags, which would require PHP to generate twice as much HTML.
Would require you to add loading.gif (and another HTTP request) or Please wait while these images load text to your page. I personally find this annoying as a website user because I want to see everything when the page is "done loading".
Conclusion:
If you have the background knowledge or time to learn how to effectively use Method 1, it gives far more potential because it allows for manipulation of the images and HTTP requests sent by your page after it loads.
Conversely, if you're looking for a simple method to space out your HTTP Requests or want to make your content load faster by making your extra images load later, Method 2 is your answer.
Looking back at methods 1 and 2, it looks like using both methods together could be the best answer. Having two of your cached and compressed images load with the page (one is visible, the other is a buffer so that the user doesn't have to wait every time they click "next"), and having the rest load one-by-one as the user sees fit.
In your specific situation, I think that Method 2 would be the most effective if your images can be displayed in a "slideshow" fashion. If all of the images need to be loaded at once, try compressing them and applying browser-caching with method 1. If too many image requests on page load is destroying your speed, try image spriting.
As of now, you are contacting the webservice 100 times. You should change it so it contacts the webservice only once and retrieves an array of all the 100 images, instead of each image separately.
You can then loop over this array, which will be very fast as no further webtransactions are needed.
If the images you are fetching from the webservice are not dynamic in nature i.e. do not get changed/modified frequently, I would suggest to setup a scheduled process/cron job on your server which gets the images from the webservice and stores locally (in your server itself), so you can display images on the webpage from your server only and avoid third party server round trip every time webpage is served to the end users.
Both of the 2 option cannot resolve your problem, may be make it worse.
For option 1:
The process where cost most time is "get_from_web_service($item)", and the code is only made it be executed by another script( if the file "get_image.php" is executed at the same server).
For option 2:
It only make the "get-image-resource-request" being trigger by browser, but your server has also need to process the "get_from_web_service($item)".
One thing must be clear is that the problem is about the performance of get_from_web_service, the most straight proposal is to make it have a better performance. On the other hand, we can make it reduce the number of concurrent connections. I haven't thought this through, only have 2 suggestion:
Asynchronous: The user didn't browse your whole page, they only notice the page at the top. If your mentioned images does not all displayed at the top, you can use jquery.lazyload extension, it can make the image resource at invisible region do not request the server until they are visible.
CSS Sprites : An image sprite is a collection of images put into a single image. If images on your page does not change frequency, you can write some code to merge them daily.
Cache Image : You can cache your image at your server, or another server (better). And do some key->value works: key is about the $item, value is the resource directory(url).
I am not a native english speaker, hope I made it clear and helpful to you.
im not an expert, but im thinking everytime you echo, it takes time. getting 100 images shouldnt be a problem (solely)
Also. maybe get_from_web_service($item); should be able to take an array?
$counter = 1;
$urls = array();
foreach($items as $item)
{
$urls[$counter] = get_from_web_service($item);
$counter++;
}
// and then you can echo the information?
foreach($urls as $url)
{
//echo each or use a function to better do it
//echo '<img url="url_to_my_website/get_image?id='.$url->id.'" />'
}
get_image.php :
$url = get_from_web_service($item);
header("Content-Type: image/png");
echo file_get_contents($url);
at the end, it would be mighty nice if you can just call
get_from_web_service($itemArray); //intake the array and return images
Option 3:
cache the requests to the web service
Option one is the best option. I would also want to make sure that the images are cached on the server, so that multiple round trips are not required from the original web server for the same image.
If your interested, this is the core of the code that I use for caching images etc (note, that a few things, like reserving the same content back to the client etc is missing):
<?php
function error404() {
header("HTTP/1.0 404 Not Found");
echo "Page not found.";
exit;
}
function hexString($md5, $hashLevels=3) {
$hexString = substr($md5, 0, $hashLevels );
$folder = "";
while (strlen($hexString) > 0) {
$folder = "$hexString/$folder";
$hexString = substr($hexString, 0, -1);
}
if (!file_exists('cache/' . $folder))
mkdir('cache/' . $folder, 0777, true);
return 'cache/' . $folder . $md5;
}
if (!isset($_GET['img']))
error404();
getFile($_GET['img']);
function getFile($url) {
// true to enable caching, false to delete cache if already cached
$cache = true;
$defaults = array(
CURLOPT_HEADER => FALSE,
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_FOLLOWLOCATION => 1,
CURLOPT_MAXCONNECTS => 15,
CURLOPT_CONNECTTIMEOUT => 30,
CURLOPT_TIMEOUT => 360,
CURLOPT_USERAGENT => 'Image Download'
);
$ch = curl_init();
curl_setopt_array($ch, $defaults);
curl_setopt($ch, CURLOPT_URL, $_GET['img']);
$key = hexString(sha1($url));
if ($cache && file_exists($key)) {
return file_get_contents($key);
} elseif (!$cache && file_exists($key)) {
unlink($key);
}
$data = curl_exec($this->_ch);
$info = curl_getinfo($this->_ch);
if ($cache === true && $info['http_code'] == 200 && strlen($data) > 20)
file_put_contents($key, $data);
elseif ($info['http_code'] != 200)
error404();
return $data;
}
$content = getURL($_GET['img']);
if ($content !== null or $content !== false) {
// Success!
header("Content-Type: image");
echo $content;
}
None of the two options will resolve server resources usage issue. Out of the two, though, I would recommend option 1. The second one will delay page loading, causing website speed to slow down, and reducing your SEO ratings.
Best option for you would be something like:
foreach($items as $item) {
echo '<img url="url_to_my_website/get_image.php?id='.$item->id.'" />'
}
Then where the magic happens is get_image.php:
if(file_exists('/path_to_local_storage/image_'.$id.'.png')) {
$url = '/path_to_images_webfolder/image_'.$id.'.png';
$img = file_get_contents($url);
} else {
$url = get_from_web_service($id);
$img = file_get_contents($url);
$imgname = end(explode('/', $url));
file_put_contents($imgname, $img);
}
header("Content-Type: image/png");
echo $img;
This was you will only run the request to web service once per image, and then store it on your local space. Next time the image is requested - you will serve it form your local space, skipping request to web service.
Of course, considering image IDs to be unique and persistent.
Probably not the best solution, but should work pretty well for you.
As we see that above you're including an URL to the web service provided image right in the <img> tag src attribute, one can safely assume that these URLs are not secret or confidential.
Knowing that above, the following snippet from the get_image.php will work with the least overhead possible:
$url = get_from_web_service($id);
header("Location: $url");
If you're getting a lot of subsequent requests to the same id from a given client, you can somewhat lessen number of requests by exploiting browser's internal cache.
header("Cache-Control: private, max-age=$seconds");
header("Expires: ".gmdate('r', time()+$seconds));
Else resort to server-side caching by means of Memcached, database, or plain files like so:
is_dir('cache') or mkdir('cache');
$cachedDataFile = "cache/$id";
$cacheExpiryDelay = 3600; // an hour
if (is_file($cachedDataFile) && filesize($cachedDataFile)
&& filemtime($cachedDataFile) + $cacheExpiryDelay > time()) {
$url = file_get_contents($cachedDataFile);
} else {
$url = get_from_web_service($id);
file_put_contents($cachedDataFile, $url, LOCK_EX);
}
header("Cache-Control: private, max-age=$cacheExpiryDelay");
header("Expires: ".gmdate('r', time() + $cacheExpiryDelay));
header("Location: $url");
This is how I call the editor:
new nicEditor({
buttonList : ['bold','italic','underline','upload'],
iconsPath:'img/nicedit.png',
uploadURI : 'http://server.com/integracion/files/nicUpload.php'
}).panelInstance(textareaId);
And the .php file exists ( and I the one in the Docs, and I updated the target paths )
/* I want them here http://server.com/integracion/files/uploads/ so... */
define('NICUPLOAD_PATH', './uploads'); // Set the path (relative or absolute) to
// the directory to save image files
define('NICUPLOAD_URI', '/uploads'); // Set the URL (relative or absolute) to
// the directory defined above
But I on response when upload completes (and of corse an alert from nicedit..)
<script>
try {
top.nicUploadButton.statusCb({"error":"Invalid Upload ID"});
} catch(e) { alert(e.message); }
</script>
what am I missing?
-EDIT
I think the problem might be in the php file:
$id = $_POST['APC_UPLOAD_PROGRESS']; /* APC is installed and enabled */
if(empty($id)) {
$id = $_GET['id'];
}
FINAL EDIT:
I have managed to make this work!
Here is an working example:
http://simplestudio.rs/yard/nicedit/
Uploaded images are going to be stored here:
http://simplestudio.rs/yard/nicedit/images/
And here is the whole code, just unpack it and put on your server, mainly I needed to adjust nicEdit.js because it had some issues.
http://simplestudio.rs/yard/nicedit/nicedit.rar
Just make your code with that js file and by looking at my example, it will work :)
Also you need to have php APC installed so that this script can work:
http://php.net/manual/en/apc.installation.php
If you by any mean have some problems I am here to solve it.
I will not delete this example on my server so that everybody who have this issue can freely download it...
The code responsible for image upload is the method uploadFile, it is looking for uploadURI option parameter.
You will need to modify onUploaded event handler to parse your custom response instead of the imgur's one (sample). By default it expects at least {"upload": { "links": {"original": "http://..."}, "image": {"width": "123" } }}.
I'm sorry but I can't help with the FormData() handling server side with PHP.
For more information you can try out the demo page on the nicEdit web site using Firebug or WebInspector to snoop the network requests, and, of course, the source code.
I'm using kohana 3.0 with kolanos-kohana-captcha-2ba7a6a module from earlier versions. Everything works fine, but I can't figure out one thing: how do I create new captcha image for current form? For example user can't read characters and clicks 'new image'. The ajax is sent, but the response is (almost always) the same image. In the controller, I tried the following:
echo new Captcha_Basic;
Captcha::instance()->__destruct();
echo Captcha::instance();
echo $captcha->generate_challenge();
and even some more, but it's almost(??) always the same image. I even tried to delay image loading on client-side, but nothing works. Any suggestions?
I had the same problem and I have solved it by simply editing system/libraries/drivers/Captcha.php file. I have changed the image_render() function so that a random string is passed as a GET parameter in the src attribute's url.
I reckon that though ajax is not caching, the browser is caching the image's src url. Every ajax call to generate a new image does indeed generate a new image. However, the src attribute the CAPCHA library returns is always the same, causing the browser to simply show the same image it has cached. Including a randomly generated string as a GET parameter causes the browser to fetch the new image.
According to Facebook graph API we can request a user profile picture with this (example):
https://graph.facebook.com/1489686594/picture
We don't need any Token since it's a public information.
But the real image URL of the previous link is: http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs356.snc4/41721_1489686594_527_q.jpg
If you type the first link on your browser, it will redirect you to the second link.
Is there any way to get the full URL (second link) with PHP, by only knowing the first link?
I have a function that gets the image from a URL to store it in the database, but it does work only if it get the full image URL.
Thanks
kire is right, but a better solution for your use case would be the following:
// get the headers from the source without downloading anything
// there will be a location header wich redirects to the actual url
// you may want to put some error handling here in case the connection cant be established etc...
// the second parameter gives us an assoziative array and not jut a sequential list so we can right away extract the location header
$headers = get_headers('https://graph.facebook.com/1489686594/picture',1);
// just a precaution, check whether the header isset...
if(isset($headers['Location'])) {
$url = $headers['Location']; // string
} else {
$url = false; // nothing there? .. weird, but okay!
}
// $url contains now the url of the profile picture, but be careful it might very well be only temporary! there's a reason why facebok does it this way ;)
// the code is untested!
You can get it with FQL:
select pic_square from user where uid=1489686594
returns:
[
{
"pic_square": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs356.snc4/41721_1489686594_527_q.jpg"
}
]
Also you can just improve your function that gets picture by url. If you use curl it can automatically follow redirect headers.
Please note that the The Surrican's answer (and possibly others) can drastically increase your script's response time (around +500ms for me on my server). This is because the server issues a request to facebook (because of get_headers()) and the execution time (computation excluded) extends from this:
browser -> server
server -> browser
to this:
browser -> server
server -> facebook (request: get_headers)
facebook -> server (response: get_headers)
server -> browser
This adds the mentioned 500ms delay. You probably should consider to cache the real url on your server or to load the profile picture via JavaScript. At least take a look at your response time before and after ;)
#The Surrican,
Nice code! Here is a clean cut code function for such process!
function get_raw_facebook_avatar_url($uid)
{
$array = get_headers('https://graph.facebook.com/'.$uid.'/picture?type=large', 1);
return (isset($array['Location']) ? $array['Location'] : FALSE);
}
This will return the RAW facebook avatar image URL. Feel free to do whatever you want with it then!
You can also add ?redirect=false to the end of your URL and then parse the JSON response directly.
In your example: https://graph.facebook.com/1489686594/picture?redirect=false
More information here https://developers.facebook.com/docs/graph-api/reference/user/picture/