I have a folder full of .jpg images. With a PHP script I'm reading the list of images in the folder and I'm displaying them on the browser.
The problem is that some of the images exist, but something it's wrong with them. They are few Kb but they can't be displayed (on the browser I see like a broken image), of course if I download these images in local I can't see them.
I tried to google but all I found was how to recognize a broken link or an empty img tag, how can I check if the image is displayable? I also tried the onError event but it isn't fired.
IMO, you’d be better off checking this on the server, using PHP. PHP has several functions to load images, such as imagecreatefromjpeg and imagecreatefrompng. Both these functions will return FALSE if there’s an error loading the image. Getting FALSE will tell you that it’s not a valid image.
Related
I have some issues rising up displaying Image files from local filesystem.
And to say it before: yes i am aware of the security breach this is causing and there is no other way playing it different because my company has no file Server yet to serve these images in a proper way.
With that out of the way the scenario:
I have an angular app which should show me some Images on my page. I wrote a directive called Gallery to do so.
Into this gallery I am handing in the absolute paths to my Image files and just set the src attribute via javascript. I tested it with some random chosen files picked from Google and everything worked out well. Allthough my browser is throwing out error because of security the picutres were displayed.
But when i got the real data from my company collegue Things started getting nasty. The error still thrown in console but nothing was displayed. I checked first overwriting the img.onload listener finding out that the testimages are giving me the Output i put onto the listener, my real data images didn't.
Next I tried to set the background attribute and not the src one. My test images were displayed the real data ONLY if it is placed into the assets folder of my app. This got me quite confused because like mentioned above using my test images it doesn't matter where they are placed, they are displayed everytime.
I also tried changing file format from png to jpg but nothing happens.
Also scaling down the images (real data has big px solutions) didn't work either.
So my question is simple ...what am i doing wrong? Could it be possible that those real data images are not exported properly. But if that's the case, why do they work in the assets folder? Like mentioned security block is not possible because my test pictures a doing well.
Finally I found the bug which was responsible for the behaviour ... It was no wrong linking it was the IIS Express which was caching old links. #mrunion and #cloned links to filesystem are still working on IE and also in Edge just for devs which have no other choice then to do it that way
Cheers Max
I'm displaying images like this:
<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />
/get_image/{{image.id}} returns some JSON with the URL to the actual image, and then I replace the src attrivute of the <img> tag using jQuery.
The problem I have is that the image is displayed on the browser only when it's been completely downloaded. For large images, this can take a while and some users are thinking that the image is never loading, despite the fact that placeholder.jpg says "Loading..."
It would be great if the image that's replacing the placeholder would actually visibly load (for instance top to bottom like most JPEGs) as opposed to just suddenly displaying when all of it has been downloaded.
A way to show a progress bar would be even better.
Does anybody have suggestoins?
You can use preloader, but still should wait for image to load completely.
Other solution relies on how you saved the images.
You can open the image in an application like photoshop and when saving the file, click on the PROGRESSIVE option(Progressive option will make the image viewable even if it is not completely loaded).
In Photoshop:
Open the image
Click on the File -> save For Web ... (or Save for Web and Devices on previous versions)
On the upper right part of the opened dialog, choose the 'JPEG' format
You will see some options, choose 'Progressive'
Save
This option will make the file slightly bigger in size, but the browser will show the images as they load.
Rather you can add image attribute 'title' or 'alt' value as 'Loading .... '
as title or alt property get displayed to user if image is about to load.
after image get loaded using Javascript you can change the alt or title value.
this is a basic solution. you can use it until you find proper solution.
Your question is very similar to my question where I discovered a solution which worked for me. It is unclear if it will work for you though because commenters have suggested it is dependent on the image being saved with the progressive option enabled.
For my case, the initial image always showed as it loaded and so my solution seemed to utilize that. For your case, if you were to initially load your big file first as a testcase and it appeared as it was downloaded, then I suspect my solution would also work for you.
I'm new to js, and I'm playing about with a for loop that places images into a #div using .append()
totalSlides is a dynamic int and can change, I want to display the same amount of images as the number of totalSlides.
I'm pretty sure the for loop logic is correct, but for some reason the images are not displaying. When i inspect in firebug i get the error "failed to load given url". I know that that url is correct, i have even tried the full url path C:/complete/folder/path etc..
I'm sure it's an easy fix that i should get but for now i just can't see why it won't load my images.
for(i=0;i<totalSlides;i++){ // Loads all number images into html
$('#numbers').append("<img src='images/numbers/number"+i+".png'/>");
};
Thanks in advance.
Jase
One reason might be if the JavaScript is located in other folder (e.g. /js/myfile.js) then the relative path will fail since it will look for the images folder inside the JS folder.
Try giving path starting from the root:
$('#numbers').append("<img src='/images/numbers/number"+i+".png'/>");
(Note the added "/" in the beggining of the image source)
so you select an image via the file input, the selected image file gets gets turned into a window.url.createobjecturl and passed to a hidden "img" element unmodified, then a preview of the image element's current data is rendered into a canvas element. so far, so good. but then when i try to render the canvas.toDataURL i keep getting that aggravating security exception about it being insecure. this happens on chrome and firefox.
understand that this is a file OBJECT that was select with an html INPUT element, and NOT via a "file://" url, and the webpage is an actual webpage, and is loaded via "http://" and not via "file://".
the image file has not even left the browser yet to go to the server, so there should not be any domain issues. it's just a raw blob being asserted as the source to an image, which is then telling the canvas to update its preview, which it does. after that, when trying to saved the canvas contents, the browser triggers an error.
i have read all of the specs regarding scenarious where the canvas element becomes tainted, and this scenario does not meet ANY of those scenarios.
i've seen a similar example on mozilla demos of some one offering code snippets to show people how to do the same thing, but i have not seen if any one had problems with it.
any ideas? TIA
#
=== UPDATE ===
#
okay, i've figured out what the PROBLEM is, but i'm still not clear on WHY it's a problem. here's the setup:
1) page is called via, eg, "example.com/"
2) script is called via: "r.example.com/script.js"
3) if script loads ANY image from "r.example.com", to use for the PAGE DESIGN, and NOT the canvas, it some how taints the entire page. in this case i draw the entire page via javascript, so the header image is tainting the rest of the page. if i change the header image to come from "example.com" instead of "r.example.com", the problem with the canvas complaining about not being secure goes away, and everything is fine.
what i don't understand is WHY this is happening. the header image is being loaded from the same place as the javascript file, and, for the sake of argument i even set the access-control-allow-origin to "*", for both the main domain and the subdomain, which makes no difference.
so, access control is allowed from anywhere, the header image is coming from the same place as the javascript file, and it is NOT being drawn to the canvas (that's a user file), so why would drawing the header image via javascript taint a canvas that it has nothing to do with??? also, the css and other media are loaded from the same subdomain, but this does not affect the page, so long as the script did not load them [o_0].
i want to keep all of my resources on a separate subdomain for scalability, so, this issue is frustrating, because i don't quite understand why it's still happening...
If you want your image to be on a separate subdomain, you have to change the origin of the image to allow all subdomains like this:
img .origin = '*.mydomain.com'
I'm using canvas with kineticJS and just tested it myself.
it appears that you have to set this property on the image object itself, as it has no domain initially [o_0]
img.origin = 'mydomain.com'
You can see my live example here: http://friendsconnect.org/scrapbooks/live_example.php. You may see that some pictures, for whatever reason, arn't being uploaded. Why is this? Does uploadify have certain restrictions, and if so how do I lift them? I have check the documentation here: http://www.uploadify.com/documentation/ but I haven't found anything relating to the problem. You can see below, some pictures are "broken" and turn out to not be even uploaded.
I'm also using a timthumbs script to reduce the file size, but that's not the problem as it says "File not found" and so the file doesn't exist, which leads back to the problem residing with uploadify. Any ideas?
EDIT: Images are JPG files, but can range. Size varies but mainly from 1-2MB.
It may be an issue with your PHP script. I've just uploaded a picture, and your web page is giving me the following details:
URL: http://www.friendsconnect.org/jquery_custom/create_user_image.php?src=/scrapbooks/uploads/image.png&h=80&w=100
Content:
<pre>no mime type specified<br />Query String : src=/scrapbooks/uploads/image.png&h=80&w=100<br />TimThumb version : 1.26</pre>
Now, you're putting that text/html content into a img tag, which obviously won't work, and so we get this broken image thing.
NB: This only occurs on some of my uploaded images, most work fine.