[Bug] Element.Screenshot wrong when DevicePixelRatio != 1

[kvii]

Rod Version: v0.116.2

The code to demonstrate your question

func main() {
	u := launcher.New().Set("window-size", "1600,900").Headless(false).MustLaunch()
	b := rod.New().DefaultDevice(windowsEdge).ControlURL(u).MustConnect()
	p := b.MustPage()

	// 截图百度 logo
	p.MustNavigate("https://www.baidu.com").MustWaitLoad()
	e := p.MustElement("div#lg")
	e.MustScreenshot("out.png") // 截图的时候页面突然“大”了一下
}

var windowsEdge = devices.Device{
	Title:          "Edge Laptop with HiDPI screen",
	Capabilities:   []string{},
	UserAgent:      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0",
	AcceptLanguage: "en",
	Screen: devices.Screen{
		DevicePixelRatio: 2, // <-- 注意这里
		Horizontal: devices.ScreenSize{
			Width:  1600,
			Height: 900,
		},
		Vertical: devices.ScreenSize{
			Width:  900,
			Height: 1600,
		},
	},
}.Landscape()

What you got

What you expect to see

What have you tried to solve the question

Codes in Element.Screenshot:

rod/element.go

Lines 697 to 705 in 393ac0d

	box := shape.Box()
	// TODO: proto.PageCaptureScreenshot has a Clip option, but it's buggy, so now we do in Go.
	return utils.CropImage(bin, quality,
	int(box.X),
	int(box.Y),
	int(box.Width),
	int(box.Height),
	)

Element 的 Screenshot 是先对页面截图，然后再根据 Element 的 Shape 进行裁切得到的结果。在 DevicePixelRatio 不是 1 的时候 shape.Box() 返回的坐标和实际元素在屏幕截图中的坐标不一致。所以对元素截图有问题。这里应该把尺寸乘以当前的 DevicePixelRatio，比如这样：

box := shape.Box()

factor := el.page.browser.defaultDevice.Screen.DevicePixelRatio
// TODO: proto.PageCaptureScreenshot has a Clip option, but it's buggy, so now we do in Go.
return utils.CropImage(bin, quality,
	int(box.X*factor),
	int(box.Y*factor),
	int(box.Width*factor),
	int(box.Height*factor),
)

[kvii]

Same issue #1034.