Question

我一直试图使用Selenium和不同的裁剪方法裁剪特定图像几天。

在我的代码之前的一个重要说明 - 以下方法用于2周前工作，由于某种原因它现在返回一个坐标错误的图像

// Go to site
Driver.Navigate().GoToUrl("http://google.com");
Screenshot screenshot = driver.GetScreenshot();

using (var ms = new MemoryStream(screenshot.AsByteArray))
using (var imgShot = Image.FromStream(ms))
using (var src = new Bitmap(imgShot))
      {
        IWebElement element = driver.FindElement(By.XPath("//canvas"));
        Rectangle cropRect = new Rectangle(element.Location.X, element.Location.Y, element.Size.Width, element.Size.Height);

        var clone = src.Clone(cropRect, src.PixelFormat);
        clone.Save(filePath);
      }

我尝试的事情：

1）我通常使用Firefox驱动程序来实现此目的，我尝试使用ChromeDriver并获得相同的结果。

2）我使用以下控制台命令检查了元素的coordiantes：$ 0.getBoundingClientRect（），我在代码中得到的位置与之匹配。

3）我尝试了4种不同的裁剪方法，包括：

IWebElement element = Driver.FindElement(By.XPath("//canvas"));
string filename = @"C:\Users\User\Desktop\test.png";
Screenshot screenshot = Driver.GetScreenshot();
screenshot.SaveAsFile(filename, ImageFormat.Png);

Rectangle cropRect = new Rectangle(element.Location.X, element.Location.Y,
    element.Size.Width, element.Size.Height);

using (Image imgShot = Image.FromFile(filename))
using (Bitmap original = new Bitmap(imgShot))
using (Bitmap target = new Bitmap(original, new Size(cropRect.Width, cropRect.Height)))
using (Graphics g = Graphics.FromImage(target))
{
    g.DrawImage(original, new Rectangle(0, 0, target.Width, target.Height),
        cropRect,
        GraphicsUnit.Pixel);
    target.Save(@"C:\Users\User\Desktop\test1.png", ImageFormat.Png);
}

为了清楚起见，我得到的图像完全是空白的。在一个不同的网站上，我得到的图像并非空白，所以我可以告诉它只是在错误的坐标中。

4）我尝试了不同的网站和不同的元素，但它们都坐错了。

5）我试图谷歌它，发现许多不同的方法是行不通的。然而，这answer说了一些关于决议的内容，这是我最好的猜测。我尝试使用原始分辨率和目标分辨率，并没有看到任何区别。设置分辨率方法在创建Graphics变量之前或之后调用，并且仍为零变化。

有趣的是，它曾在两周前工作，但我从未更改过代码......

Answer 1

您正在获取空白图像可能是因为调用GetScreenshot时尚未呈现该区域。试着等一下，看看是不是这样：

Thread.Sleep(3000);
Screenshot screenshot = ((ITakesScreenshot)element).GetScreenshot();

这也可能是由于页面中的实现阻止了网络抓取工具，在这种情况下，如果不深入研究代码，你就无能为力。

请注意，您不应使用element.Location，因为它返回相对于文档而不是视口的坐标。如果驱动程序支持，您还应该考虑直接在GetScreenshot上调用IWebElement。

这是一个捕获页脚的工作示例：

var options = new ChromeOptions();
options.AddArgument("disable-infobars");

var driver = new ChromeDriver(options);

driver.Url = "https://stackoverflow.com/questions";

IWebElement element = driver.FindElement(By.CssSelector("#footer"));

string filePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Desktop), @"screenshot.png");

try {
    Thread.Sleep(500);
    Screenshot screenshot = ((ITakesScreenshot)element).GetScreenshot();
    screenshot.SaveAsFile(filePath, ScreenshotImageFormat.Png);
}
catch (WebDriverException) {

    var result = ((IJavaScriptExecutor)driver).ExecuteScript(
      "var elm = arguments[0];" +
      "elm.scrollIntoView(true);" +
      "var rect = elm.getBoundingClientRect();" +
      "return [rect.left, rect.top, rect.width, rect.height];"
      , element);

    int[] pts = Array.ConvertAll(((IReadOnlyCollection<object>)result).ToArray(), Convert.ToInt32);
    var rect = new Rectangle(pts[0], pts[1], pts[2], pts[3]);

    Screenshot screenshot = ((ITakesScreenshot)driver).GetScreenshot();

    using (var mstream = new MemoryStream(screenshot.AsByteArray))
    using (var bitmap = (Bitmap)Image.FromStream(mstream, false, false)) {
        rect.Intersect(new Rectangle(0, 0, bitmap.Width, bitmap.Height));

        if (rect.IsEmpty)
            throw new ArgumentOutOfRangeException("Cropping rectangle is out of range.");

        var clone = bitmap.Clone(rect, bitmap.PixelFormat);
        clone.Save(filePath);
    }
}

Answer 2

显然，2周前实际发生变化的事情不是我的代码，而是我的机器上安装的Firefox版本。当前版本 - v52，返回错误坐标的元素。卸载并重新安装以前的版本 - v47解决了问题

C＃裁剪图像返回错误的坐标

2 个答案: