2

I have an image that has "src" pointing to an external server, like this:

   <img src="http://somewhere.com/script.php?id=1234">

The image returned is .png and it can be returned as a "X" image or "O" image.

How can I determinate if the image is X or O with javascript/jquery? Calculating md5 of the loaded image? In case how can I access to the image bytes and calculate md5?

Randomize
  • 8,651
  • 18
  • 78
  • 133
  • 1
    if its X or O, is it really necessary to use Images and not `1` or `0`, then render an image based on what it returned? – Gntem Aug 19 '12 at 10:43
  • yes I have no other info, and image need to be displayed anyway – Randomize Aug 19 '12 at 10:44
  • You really should be able to do what GeoPhoenix suggested, but you could cheat by making one of the images one pixel taller or wider and check the size with JavaScript after it loads... – Dagg Nabbit Aug 19 '12 at 10:46
  • I have no any kind of access to the remote server with the image, I cannot change anything about it – Randomize Aug 19 '12 at 10:53

2 Answers2

2

First of all, what you're doing is probably very inefficient. Because you load the image from a dynamic PHP script, most browsers will not cache it. Furthermore, loading images from another site you do not have access to is always considered bad practice.

Anyways, the easiest way to do this is using a server side language like PHP. Then you can get the file size using either curl, fsocketopen, get_headers or fopen. By comparing this number to the known file size of the images, you know which image is loaded. Take a look at this page for an example using curl.

Alternatively, you can also do this using JavaScript (if you really must): take a look at this stackoverflow question.

Community
  • 1
  • 1
Frog
  • 1,631
  • 2
  • 17
  • 26
  • I did something similar on PHP with the command md5_file(...) that return the hash of the remote image. On javascript side just checking the hash. – Randomize Aug 23 '12 at 06:05
  • Firefox block for security reason your suggested solution javascript-only – Randomize Aug 23 '12 at 06:06
  • @Randomize: It's better to check for the file size using PHP instead of the md5 hash, because the whole file needs to be downloaded when hashing, while you only need to take a look at the header if you check the file size. Also, why would you (when hashing) check the file size using Javascript? Then you would have to store the hash for each image in the `alt` tag or something similar, while it's way easier to just check it in PHP using a simple if-statement. – Frog Aug 23 '12 at 14:30
  • @Randomize: And as to the Javascript-only method (which I really think is worse): this seems to be an issue related to cross-domain data. While canvas supports loading images from another domain, `toDataURL()` will throw a security error, because that could be a possible in for a hacker. There is a solution that works with some server, which you can read more about [here](http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation). – Frog Aug 23 '12 at 14:36
  • @Randomize: Alternatively, you can create a PHP script which basically mirrors images: you give it the URL of the image you want to open and it loads that image using `CURL` or `file_get_contents()`. Because the Javascript parser thinks the image is located at your server, it will no longer throw a security error. But the big disadvantage is that the image is loaded twice, so if I were you I would go with the PHP-only way. – Frog Aug 23 '12 at 14:40
  • thanks for ur hints and comments! about the "hash or size", is it possible that 2 different images have the same size? In case hash helps to deal with that. – Randomize Aug 25 '12 at 09:43
  • Yes, it is possible that two images have the same size, but since you only check for two images (as far as I understand), you don't have this problem. And by the way: two different images can theoretically also produce the same hash, the chance is just smaller than the same size. – Frog Aug 25 '12 at 11:40
0

You could draw the image into a canvas object and then check the pixels. E.g. an X would perhaps have a black pixel at the top-left corner while an O would have a transparent or white one (depends on the images of course).

Ridcully
  • 23,362
  • 7
  • 71
  • 86