如何使用JavaScript在样式表中获取有关图像的信息

Question

我正在使用WorldSpace Sync扫描公司网站上的品牌违规行为。 我想获取有关样式表中使用的任何图像的信息（宽度，高度等）。

WorldSpace允许用户在从XPath返回的节点上运行简单的JavaScript代码（在本例中为//*[@rel="stylesheet"] ）。 我可以使用以下方法获取每个图像的URL：

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;
}

以下是上述示例输出：

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") 

我不是JavaScript专家，所以我拥有这些URL，现在不知道该怎么办。 似乎所有与图像宽度有关的问题都使用jQuery ，但是我认为我不能在WorldSpace中使用它。

小提琴将是理想的，但任何建议将不胜感激！

Answer 1

使用javascript检索图像大小并非万无一失。 我可以硬编码与原始图像大小不同的图像并欺骗您的系统。 如果要通过CSS文件检索图像大小，则必须将文件下载到服务器并以这种方式检查其大小。

尝试使用功能getimagesize(); ，如果PHP是您的游戏。

Answer 2

尝试使用ImageInfo 。 您可以在此处找到示例以及源文件。 http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html

演示链接在这里； http://www.nihilogic.dk/labs/imageinfo/

您可以获取大量数据，例如：

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