CODEWITHSUNDEEP
javascriptc#.netwinformswebbrowser-control
Tony_Henrich
Tony_Henrich

Reputation: 44085

How to programmatically get the rendered dimensions of an image in a web page?

I have a need to interrogate every img tag in a webpage and find its height and width in its rendered form. Not the actual physical image dimensions. I need to do this in C# in a WinForm app.

Example: http://motherboard.vice.com/read/i-built-a-botnet-that-could-destroy-spotify-with-fake-listens

The main image's physical dimension is 3648x2736. The rendered image is 1000x750 when my browser is maximized. I am aware of the media queries and the image resizing due to them. This img tag doesn't have a width and height attributes. How do I get my app to get the 1000x750 size using C# and assuming largest media query size and a resolution of at least 1400 width.

I am assuming I will need a browser control like Awesomium, CefSharp, EO.Browser or IE Web Browser Control? Not sure which one can do this. I would like to iterate through the img tags and get the dimensions of each rendered one as if I opened a browser and used dev tools to get the computed dimensions of each image. I prefer to do this processing in C# than Javascript.

Upvotes: 1

Views: 976

Answers (1)

tttony
tttony

Reputation: 5082

I've been testing with Selenium WebDriver and I think it's the best choice for now

I did a little test and it's working as expected, here is the test code

[TestFixture]
public class TestClass
{
    private FirefoxDriver _driver;

    [SetUp]
    public void Setup()
    {
        _driver = new FirefoxDriver();
        _driver.Url = "http://motherboard.vice.com/read/i-built-a-botnet-that-could-destroy-spotify-with-fake-listens";
    }

    [TearDown]
    public void TearDown()
    {
        _driver.Quit();
    }

    [TestCase()]
    public void TestImage()
    {
        IWebElement element = _driver.FindElementByXPath("//img[@class = 'vmp-image' and position() = 1]");

        Assert.IsNotNull(element);

        string width = element.GetCssValue("width");
        string height = element.GetCssValue("height");

        Console.WriteLine("width:  " + width);
        Console.WriteLine("height: " + height);
    }
}

In this test Selenium WebDriver opens Firefox and you can see the site loading, after it's loaded you have access to the DOM of the site, even you can execute Javascript code, find elements by XPath, Css, ClassName, TagName, etc...

Also remember that is a browser and you should maximize or give a specific size to the window's browser because the site may be mobile friendly so you can get diferent image sizes

Also you can use Chrome and InternetExplorer here is the documentation

Upvotes: 1

Related Questions