4

I'm looking for a browser extension working on any cross-platform browser such as Firefox, Chrome or Opera.

This extension should let the user drag a rectangle on an image, and give him the position and dimension of this rectangle. The position should be relative to the top left corner of the image.

I've found a Firefox extension MeasureIt that allows to drag a rectangle and obtain the dimension but not the position.

There is also the JQuery plugin imgAreaSelect that allows to retrieve position and dimension but it's not bundled as a browser extension.

2

Firefox's built-in developer tools can do exactly what you want.

Here's how:

  1. Within Firefox, open any of the developer tools, such as the Inspector. The developer tools are located inside the menuitem called "Web Developer". There are keyboard shortcuts available for quick access, which may vary a little depending on the OS.
  2. Click on the little horizontal ruler (not the 90 degree angled ruler) in the developer tools toolbar. If it's not visible, go to the developer tools settings, and enable "Measure a portion of this page".
  3. As you move your cursor, you will see a small overlay box showing the current position. This provides half of the data you seek.
  4. Click and drag to form a rectangle anywhere on the page. Firefox will display the size of the rectangle formed by your movement. This provides the other half of the data you seek.

Enjoy!

  • Thank you for your answer. It's useful but two steps are needed to obtain (x,y,w,h). I would prefer to obtain theses values in one step and being able to copy paste them. – Ortomala Lokni Feb 24 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.