Possible to load image/png data after link redirect?

Question

I have this problem... I'm working on a project which loads names from a JSON file (this is not important).

The thing is I use a Wikia Special:Filepath link to get my images. So when I type in my browser: http://2007.runescape.wikia.com/wiki/Special:Filepath/Abyssal_head.png it returns this image link: http://img1.wikia.nocookie.net/__cb20140108135954/2007scape/images/0/0f/Abyssal_head.png.

Is there a way to work around this redirect so I can properly load it with an ajax call? Whenever I try to do this first link I get this error (which is normal because it can't find the correct headers I think):

XMLHttpRequest cannot load http://2007.runescape.wikia.com/wiki/Special:Filepath/Abyssal_head.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

All help is welcome.

Answer 1

Special:Filepath is useful for linking to files from within a wiki, but if you want to programmatically fetch paths, using the API will give you a lot more flexibility. To get the filepath, just use the prop=imageinfo and iiprop=url parameters, like this:

api.php?action=query &titles=Image:Abyssal_head.png &prop=imageinfo &iiprop=url &format=json

This will give you a json object like this

{"query": {
    "normalized":...,
    "pages":{
        "28052":{
            "pageid":28052,
            "ns":6,
            "title":"File:Abyssal head.png",
            "imagerepository":"local",
            "imageinfo":[
                {
                    "url":"http:\/\/img1.wikia.nocookie.net\/__cb20140108135954\/2007scape\/images\/0\/0f\/Abyssal_head.png",
                    "descriptionurl":"http:\/\/2007.runescape.wikia.com\/wiki\/File:Abyssal_head.png"
                }
            ]
        }
    }
}}

...with your desired url in query.pages.{PAGE}.imageinfo.url

You can query for multiple file at ones, separating their titles with |.

See 2007.runescape.wikia.com/api.php for full documentation.