I'm looking for a way to check whether a specific image has been loaded on a webpage with Selenium IDE.
My first try was to generate a hash value of the image but this doesn't seem to be possible with javascript. I then found out that you can base64 encode an image if you load it into a canvas and then call toDataUrl(). However this doesn't work if the image is located on another domain.
My image server provides a standard "image not found"-image. I want to check if a specific image was successfully loaded by comparing the loaded image against the failure image. Do you have any ideas how this can be achieved?
Have you looked at 'selenium signature' as a plug in to the ide? https://addons.mozilla.org/en-US/firefox/addon/selenium-ide-signature/
It will make a crc32 signature of the element like *html=50D5FBD3*css=5BBF6784*img=81AD9F9D*
You'll only need the *img=81AD9F9D* portion to validate an image.
Related
I have an application that loads an image - the URL of the image however is dynamically generated.
The image URL would look like this (I get the image name through their API):
http://openweathermap.org/img/w/10d.png
That URL is created in javascript - how would I make javascript actually get the image from that URL and return the .png so I could display it?
Would ajax be best for this? The solution would have be in regular javascript as the application displaying the image only allows for basic javascript.
Edit: This is for a digital signage solution - so I need to get the .png file into javascript where I will return ThePicture so the signage can display it appropriately. So unfortunately, just adding it to the/a DOM won't work.
I've created a simple web email client.
I want to "block" (i.e. not show) images whose protocol is http (vs https) because my site is served over ssl and I don't want insecure content warnings.
What's the best way to go about this? Should I traverse the email dom and set the image href to "" (ie. empty string)?
Is there a better way?
I should note that this is a temporary measure. In the future I will set up an image proxy/cache system similar to gmail's.
I've looked at the way it's done in Outlook, gmail, yahoo, etc. Basically they just use a placeholder image (hosted on some cdn) that's just a small grey box, and they let the size attributes of the img tag scale it to the right size.
So all they do is change the url of the img tag to be the url of the grey box.
A smart variation if you want to eventually show the correct image (enable images) is to store the url of the real image location as part of a query string that can be parsed and used later to get the real image:
http://mycdn.com/placeholderimage.jpg?http://realcdn.com/therealimage.jpg
I'm wondering is there a JavaScript library available that would allow me to generate an Image from the contents of a DIV.
Basically this is required for some Server-Side Printing code, which needs to print a background from the Browser.
What I'd ultimately like to do would be encode the DIV contents into PNG format and post up the encoded data with the print operation.
Any ideas if this is possible ?
[EDIT] What I have is a mapping application where background data is coming from an image server straight into a browser DIV (Think Google Maps). That div is background to me main data. When Print is pressed the server generates a PDF from the data it knows about, but knows nothing about the browser's background data. What I'd really like is to be able to provide the server with the browsers background image in some way!
Cheers,
Ro
Maybe it's possible with the Canvas:
MDN - Drawing Graphics with Canvas
You can create an image tag from JavaScript but not the actual image in it: JS has no commands to allocate memory for the bitmap and it has no commands to render anything on it.
The usual solution is to have a report generator on the server which creates the image on request. Look at BIRT or JasperReports.
[EDIT] Based on your comment, the solution is simple: Examine the DIV, find the URL for the background image and replace the DIV with an IMG element. Put the URL into the SRC attribute and then print.
Very interesting question.
Actually I solve this problem using ajax (transfer images' positions to the server, server creates one image from pieces, save it and send url to the client). I don't very like this solution but I don't know other yet.
I really don't think this is possible on the browser, certainly not without some kind of plugin.
Could you send some coordinate info or something to the web server and that way have the web server request the same map image from the image server?
Generating images was only possible in IE5 :( Then due to security reasons it was dropped. I'm still missing it.
I think I've worked out a way to do it.
1) When the user presses Print, interrogate the DIV
2) Images on that DIV are being generated by the OpenLayers API
3) Grab the URL of each Image
4) Grab the location on screen of each image
5) Translate the screen location into a Real-World location (I have API for this)
6) As part of the print send up all the image URL's along with their real-world extents
7) Allow the server to re-request the Images and draw them into their appropriate locations.
Does it have to be done on the browser side? I have seen where you can do a server side call and the MIME type on the server response is the image type. I think the example I'm thinking of was for b64 encoded jpegs in a db, but the process should be the same. The response would be the data that is currently in your DIV. Sorry if I'm way off base.
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'
I want to be able to use a Greasemonkey script that can take an image from a page, scan it for the darkest pixel, and then return those coordinates to the browser.
Originally, I used a flash script... Greasemonkey embedded a local flash file that would fetch the image based on a URL in the source of the webpage, use ActionScript to get the darkest pixel, and then send a POST request with those coordinates as values.
The problem is, I only want to download the image one time. With this method, it does it twice (once in browser, once in flash). Is there a way to manipulate an image from a webpage within Javascript or with another client-side language? I tried using a Canvas, but you cannot perform the getImageData() function on images hosted on remote servers.
You could load it in flash only, and do with your image whatever you want, then if you need to show it in the page you could encode the image as base64 string of the PNG (you will need AS libraries for PNG and base64 encoding).
The next step would be to pass the string to javascript, and in Javascript you could take advantage of the ability to embed base64 images (supported in Firefox, opera, not IE).
The syntax is:
<img src='data:image/png;base64,ABCDE...'>
where "ABCDE..." is the base64 string generated in flash.
This way you would only get the image once, but still will be able to show it as a normal html image.
I used this technique in a pet project i created (www.creationempire.com/tstyles) to generate the images in a online image generator, and got the original idea from http://danielmclaren.net/2008/03/embedding-base64-image-data-into-a-webpage
Hugo