如何使用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