Measure area in a PDF using JavaScript

Use Nutrient Web SDK 2022.5 or later to measure area in a PDF. To measure area in your app, contact the Sales team to add the Measurement Tools component to your license. You can also run the SDK in trial mode.

Measure area in these ways:

Measure the area of a polygon
Measure the area of an ellipse
Measure the area of a rectangle

Measuring the area of a polygon

Measure the area of a custom-drawn polygon with the built-in UI or with code.

Use the built-in UI
Measure a polygon programmatically

Measuring the area of a polygon using the built-in UI

Use the polygon area tool to draw around the area you want to measure.

Click the measurement tools icon in the toolbar.
Click Polygon Area.
Draw a polygon around the area to measure.

Measuring the area of a polygon programmatically

To measure polygon area with code, use the PolygonAnnotation shape constructor. Pass a measurementScale property and a measurementPrecision property as parameters:

let pspdfkitInstance; // Global or module-level variable.
NutrientViewer.load({
  ...baseOptions,
  theme: NutrientViewer.Theme.DARK,
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems,
    { type: "cloudy-rectangle", dropdownGroup: "shapes" },
    { type: "dashed-rectangle", dropdownGroup: "shapes" },
    { type: "cloudy-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-polygon", dropdownGroup: "shapes" },
    { type: "content-editor", dropdownGroup: "editor" },
    { type: "form-creator", dropdownGroup: "editor" },
    { type: "measure", dropdownGroup: "editor" },
    { type: "document-comparison", dropdownGroup: "editor" },
  ],
  measurementValueConfiguration: (documentScales) => {
    const customAreaScale = {
      name: "myCustomAreaScale",
      scale: {
        unitFrom: "pt", // Simple string for points.
        unitTo: "cm",   // Simple string for centimeters.
        fromValue: 1,
        toValue: 0.05,
      },
      precision: NutrientViewer.MeasurementPrecision.TWO,
      selected: true,
    };
    return [customAreaScale, ...documentScales];
  },
})
  .then(async (instance) => {
    console.log("Nutrient loaded!");
    try {
      // Define the points for a triangle polygon.
      const points = NutrientViewer.Immutable.List([
        new NutrientViewer.Geometry.Point({ x: 100, y: 100 }),
        new NutrientViewer.Geometry.Point({ x: 200, y: 100 }),
        new NutrientViewer.Geometry.Point({ x: 150, y: 150 }),
      ]);

      // Calculate the precise bounding box.
      let minX = Infinity;
      let minY = Infinity;
      let maxX = -Infinity;
      let maxY = -Infinity;
      points.forEach((point) => {
        minX = Math.min(minX, point.x);
        minY = Math.min(minY, point.y);
        maxX = Math.max(maxX, point.x);
        maxY = Math.max(maxY, point.y);
      });
      const boundingBox = new NutrientViewer.Geometry.Rect({
        left: minX,
        top: minY,
        width: maxX - minX,
        height: maxY - minY,
      });

      // Create a polygon annotation with measurement properties.
      const polygonAnnotation = new NutrientViewer.Annotations.PolygonAnnotation({
        pageIndex: 0,
        points: points,
        boundingBox: boundingBox,
        measurementScale: new NutrientViewer.MeasurementScale({
          unitFrom: NutrientViewer.MeasurementScaleUnitFrom.POINTS,
          unitTo: NutrientViewer.MeasurementScaleUnitTo.CENTIMETERS,
          fromValue: 1,
          toValue: 0.05,
        }),
        measurementPrecision: "twoDp",
      });

      // Add the annotation to the document.
      await instance.create(polygonAnnotation);
      console.log("Polygon annotation with measurement properties created and added.");
      console.log((await instance.getAnnotations(0)).toJS());
    } catch (error) {
      console.error("Error creating or adding polygon annotation:", error);
    }
  })
  .catch(function (error) {
    console.error("Error loading PDF:", error.message);
  });

You can try the code snippet above in the polygon area playground(opens in a new tab). For more information on scale and precision, refer to the configure measurements guide.

Measuring the area of an ellipse

Measure the area of an ellipse with the built-in UI or with code.

Use the built-in UI
Measure an ellipse programmatically

Measuring the area of an ellipse using the built-in UI

Use the ellipse area tool to draw around the area you want to measure.

Click the measurement tools icon in the toolbar.
Click Ellipse Area.
Draw an ellipse around the area to measure.

Measuring the area of an ellipse programmatically

To measure ellipse area with code, use the EllipseAnnotation shape constructor. Pass a measurementScale property and a measurementPrecision property as parameters:

let pspdfkitInstance; // Global or module-level variable.
NutrientViewer.load({
  ...baseOptions,
  theme: NutrientViewer.Theme.DARK,
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems,
    { type: "cloudy-rectangle", dropdownGroup: "shapes" },
    { type: "dashed-rectangle", dropdownGroup: "shapes" },
    { type: "cloudy-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-polygon", dropdownGroup: "shapes" },
    { type: "content-editor", dropdownGroup: "editor" },
    { type: "form-creator", dropdownGroup: "editor" },
    { type: "measure", dropdownGroup: "editor" },
    { type: "document-comparison", dropdownGroup: "editor" },
  ],
  measurementValueConfiguration: (documentScales) => {
    const customAreaScale = {
      name: "myCustomAreaScale",
      scale: {
        unitFrom: "pt", // Simple string for points.
        unitTo: "cm", // Simple string for centimeters.
        fromValue: 1,
        toValue: 0.05,
      },
      precision: NutrientViewer.MeasurementPrecision.TWO,
      selected: true,
    };
    return [customAreaScale, ...documentScales];
  },
})
  .then(async (instance) => {
    console.log("Nutrient loaded!");
    try {
      // Define the bounding box for the ellipse.
      const ellipseBoundingBox = new NutrientViewer.Geometry.Rect({
        left: 150,
        top: 150,
        width: 200,
        height: 100,
      });

      const ellipseAnnotation = new NutrientViewer.Annotations.EllipseAnnotation({
        strokeColor: NutrientViewer.Color.BLUE,
        pageIndex: 0,
        boundingBox: ellipseBoundingBox,
        measurementPrecision: NutrientViewer.MeasurementPrecision.TWO,
        measurementScale: new NutrientViewer.MeasurementScale({
          unitFrom: NutrientViewer.MeasurementScaleUnitFrom.POINTS,
          unitTo: NutrientViewer.MeasurementScaleUnitTo.CENTIMETERS,
          fromValue: 1,
          toValue: 0.05,
        }),
      });

      // Add the annotation to the document.
      await instance.create(ellipseAnnotation);
      console.log("Ellipse area measurement annotation created and added.");
      console.log((await instance.getAnnotations(0)).toJS());
    } catch (error) {
      console.error(
        "Error creating or adding area measurement annotation:",
        error
      );
    }
  })
  .catch(function (error) {
    console.error("Error loading PDF:", error.message);
  });

You can try the code snippet above in the ellipse area playground(opens in a new tab). For more information on scale and precision, refer to the configure measurements guide.

Measuring the area of a rectangle

Measure the area of a rectangle with the built-in UI or with code.

Use the built-in UI
Measure a rectangle programmatically

Measuring the area of a rectangle using the built-in UI

Use the rectangle area tool to draw around the area you want to measure.

Click the measurement tools icon in the toolbar.
Click Rectangle Area.
Draw a rectangle around the area to measure.

Measuring the area of a rectangle programmatically

To measure rectangle area with code, use the RectangleAnnotation shape constructor. Pass a measurementScale property and a measurementPrecision property as parameters:

let pspdfkitInstance; // Global or module-level variable.
NutrientViewer.load({
  ...baseOptions,
  theme: NutrientViewer.Theme.DARK,
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems,
    { type: "cloudy-rectangle", dropdownGroup: "shapes" },
    { type: "dashed-rectangle", dropdownGroup: "shapes" },
    { type: "cloudy-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-polygon", dropdownGroup: "shapes" },
    { type: "content-editor", dropdownGroup: "editor" },
    { type: "form-creator", dropdownGroup: "editor" },
    { type: "measure", dropdownGroup: "editor" },
    { type: "document-comparison", dropdownGroup: "editor" },
  ],
  measurementValueConfiguration: (documentScales) => {
    const customAreaScale = {
      name: "myCustomAreaScale",
      scale: {
        unitFrom: "pt", // Simple string for points.
        unitTo: "cm",   // Simple string for centimeters.
        fromValue: 1,
        toValue: 0.05,
      },
      precision: NutrientViewer.MeasurementPrecision.TWO,
      selected: true,
    };
    return [customAreaScale, ...documentScales];
  },
})
  .then(async (instance) => {
    console.log("Nutrient loaded!");
    try {
      // Define the bounding box for the rectangle.
      const rectangleBoundingBox = new NutrientViewer.Geometry.Rect({
        left: 100,
        top: 100,
        width: 200,
        height: 100,
      });

      // Create a rectangle annotation with measurement properties.
      const rectangleAnnotation = new NutrientViewer.Annotations.RectangleAnnotation({
        pageIndex: 0,
        boundingBox: rectangleBoundingBox,
        measurementScale: new NutrientViewer.MeasurementScale({
          unitFrom: NutrientViewer.MeasurementScaleUnitFrom.POINTS,
          unitTo: NutrientViewer.MeasurementScaleUnitTo.CENTIMETERS,
          fromValue: 1,
          toValue: 0.05,
        }),
        measurementPrecision: "twoDp", // Set `measurementPrecision`.
      });

      // Add the annotation to the document.
      await instance.create(rectangleAnnotation);
      console.log("Rectangle annotation with linear measurementScale created and added.");
      console.log((await instance.getAnnotations(0)).toJS());
    } catch (error) {
      console.error("Error creating or adding rectangle annotation:", error);
    }
  })
  .catch(function (error) {
    console.error("Error loading PDF:", error.message);
  });

You can try the code snippet above in the rectangle area playground(opens in a new tab). For more information on scale and precision, refer to the configure measurements guide.

Configuring measurements

For more information on configuring measurements, refer to the configure measurements guide.

Area measurements always show a single unit. Nutrient Web SDK applies compound mixed-unit labels to distance and perimeter measurements only. A scale that defines compoundUnits still renders area values such as 12.50 sq m rather than a chain of units.