How can I get information about images in a stylesheet using JavaScript

Question

I am using WorldSpace Sync to scan my company's websites for branding violations. I want to get information (width, height, etc) about any images used in stylesheets.

WorldSpace allows the user to run simple JavaScript code on nodes returned from an XPath (//*[@rel="stylesheet"] in my case). I can get the URL of each image using the following:

function evaluateNodes( nodes, optionValue) {
    var viols = [];
    var violation = false;
    var relatedNodes = [];
    var additionalInfo = "";
    var reEx = new RegExp( "(url[(].*?[)]).*;", "gi");
    try {
        debugOut( "TRYING: "+nodes.length);
        for ( var i = 0, _len = nodes.length; i < _len; i++) {
            for ( var j = 0, _ilen = nodes[i].ownerDocument.styleSheets.length; j < _ilen; j++) {
                var styleSheet = nodes[i].ownerDocument.styleSheets[j];
                additionalInfo = "";
                violation = false;
                for ( var k = 0, _iilen = styleSheet.cssRules.length; k < _iilen; k++) {
                    var cssRule = styleSheet.cssRules[k];
                    switch( cssRule.type) {
                        case 1:
                            varText = cssRule.cssText;
                            while (matches = reEx.exec( varText )) {
                                violation = true;
                                additionalInfo+=" IMAGE: "+matches[1]+"\n"
                            }
                            break;
                        case 3:
                            // import
                            break;
                        default:
                            break;
                    }

                }
                if ( violation) {
                    viols.push( {
                        node: styleSheet.ownerNode
                        ,additionalInfo: additionalInfo
                        ,relatedNodes: relatedNodes
                    });
                }
            }
        }
    } catch( ee) {
        debugOut( "EXCEPTION:"+ee);
    }
    return viols;
}

The following is some sample output of the above:

IMAGE: url("/images/lightbox/tile.png") 
IMAGE: url("/images/lightbox/close-lightbox.jpg") 
IMAGE: url("/images/lightbox/tile.png") 
IMAGE: url("/images/news/lightbox-image-header.jpg") 
IMAGE: url("/images/lightbox/close-lightbox.jpg") 

I am not a JavaScript guy, so I don't know what to do now that I have these URLs. It seems like all of the questions related to image width use jQuery, but I do not think I can use that in WorldSpace.

A Fiddle would be ideal, but any suggestions would be appreciated!

Answer 1

Try using ImageInfo. You can find an example plus the source files here; http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html

Demo link here; http://www.nihilogic.dk/labs/imageinfo/

You can get tons of data back, like;

format: JPEG
version: 
width: 400
height: 300
bpp: 24
alpha: false
mimeType: image/jpeg
byteSize: 32641
exif:   ImageDescription :           
    Make : NIKON
    Model : E4600
    Orientation : 1
    XResolution : 300
    YResolution : 300
    ResolutionUnit : 2
    Software : Adobe Photoshop CS3 Windows
    DateTime : 2008:05:08 14:54:46
    YCbCrPositioning : 2
    ExifIFDPointer : 236
    ExposureTime : 0.005747126436781609
    FNumber : 8.2
    ExposureProgram : Normal program
    ISOSpeedRatings : 50
    ExifVersion : 0220
    DateTimeOriginal : 2006:06:13 15:44:45
    DateTimeDigitized : 2006:06:13 15:44:45
    ComponentsConfiguration : YCbCr
    CompressedBitsPerPixel : 2
    ExposureBias : 0
    MaxApertureValue : 3
    MeteringMode : Pattern
    LightSource : Flash
    Flash : Flash did not fire, compulsory flash mode
    FocalLength : 17.1
    UserComment : [125 values]
    FlashpixVersion : 0100
    ColorSpace : 1
    PixelXDimension : 400
    PixelYDimension : 300
    InteroperabilityIFDPointer : 872
    FileSource : DSC
    SceneType : Directly photographed
    CustomRendered : Normal process
    ExposureMode : 0
    WhiteBalance : Manual white balance
    DigitalZoomRation : 0
    FocalLengthIn35mmFilm : 102
    SceneCaptureType : Standard
    GainControl : None
    Contrast : Normal
    Saturation : Normal
    Sharpness : Normal
    SubjectDistanceRange : Unknown