Measure area in a PDF using JavaScript

Measure area in a PDF using Nutrient Web SDK starting with version 2022.5. To measure area in your app, contact the Sales team to add the Measurement Tools component to your license, or run the SDK in trial mode.

Measure area in one of the following ways:

Measure the area of a custom-drawn 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 in one of the following ways:

Using the built-in user interface (UI)
Programmatically

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

To measure the area of a polygon using the built-in UI, follow the steps below:

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

Measuring the area of a polygon programmatically

To measure the area of a polygon programmatically, use the PolygonAnnotation shape constructor, which takes a measurementScale property and a measurementPrecision property as its parameters, as demonstrated in the code snippet below:

let pspdfkitInstance; // Global or module-level variable.
PSPDFKit.load({
  ...baseOptions,
  theme: PSPDFKit.Theme.DARK,
  toolbarItems: [
    ...PSPDFKit.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: "2", // Simple string for precision.
      selected: true,
    };
    return [customAreaScale, ...documentScales];
  },
})
  .then(async (instance) => {
    console.log("Nutrient loaded!");
    try {
      // Define the points for a triangle polygon.
      const points = PSPDFKit.Immutable.List([
        new PSPDFKit.Geometry.Point({ x: 100, y: 100 }),
        new PSPDFKit.Geometry.Point({ x: 200, y: 100 }),
        new PSPDFKit.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 PSPDFKit.Geometry.Rect({
        left: minX,
        top: minY,
        width: maxX - minX,
        height: maxY - minY,
      });

      // Create a polygon annotation with measurement properties.
      const polygonAnnotation = new PSPDFKit.Annotations.PolygonAnnotation({
        pageIndex: 0,
        points: points,
        boundingBox: boundingBox,
        isMeasurement: true,
        measurementScale: {
          unitFrom: "pt", // Simple string for points.
          unitTo: "cm",   // Simple string for centimeters.
          fromValue: 1,
          toValue: 0.05, // Linear conversion.
        },
        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 our playground. For more information on scale and precision, refer to the guide on configuring measurements.

Measuring the area of an ellipse

Measure the area of an ellipse in one of the following ways:

Using the built-in user interface (UI)
Programmatically

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

To measure the area of an ellipse using the built-in UI, follow the steps below:

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

Measuring the area of an ellipse programmatically

To measure the area of an ellipse programmatically, use the CircleAnnotation shape constructor, which takes a measurementScale property and a measurementPrecision property as its parameters, as demonstrated in the code snippet below:

let pspdfkitInstance; // Global or module-level variable.
PSPDFKit.load({
  ...baseOptions,
  theme: PSPDFKit.Theme.DARK,
  toolbarItems: [
    ...PSPDFKit.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: "2",
      selected: true,
    };
    return [customAreaScale, ...documentScales];
  },
})
  .then(async (instance) => {
    console.log("Nutrient loaded!");
    try {
      // Define the bounding box for the ellipse.
      const ellipseBoundingBox = new PSPDFKit.Geometry.Rect({
        left: 150,
        top: 150,
        width: 200,
        height: 100,
      });

      // Calculate the center point of the ellipse.
      const center = ellipseBoundingBox.center;

      // Create the ellipse annotation for area measurement.
      const ellipseAnnotation = new PSPDFKit.Annotations.EllipseAnnotation({
        strokeColor: PSPDFKit.Color.BLUE,
        pageIndex: 0,
        center: center,
        radiusX: ellipseBoundingBox.width / 2,
        radiusY: ellipseBoundingBox.height / 2,
        boundingBox: ellipseBoundingBox,
        measurementPrecision: "twoDp", // Using string format.
        measurementScale: {
          unitFrom: "pt", // Simple string for points.
          unitTo: "cm", // Simple string for centimeters.
          fromValue: 1,
          toValue: 0.05, // Linear conversion.
        },
        isMeasurement: true, // Marking it as a measurement.
      });

      // 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 our playground. For more information on scale and precision, refer to the guide on configuring measurements.

Measuring the area of a rectangle

Measure the area of a rectangle in one of the following ways:

Using the built-in user interface (UI)
Programmatically

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

To measure the area of a rectangle using the built-in UI, follow the steps below:

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

Measuring the area of a rectangle programmatically

To measure the area of a rectangle programmatically, use the SquareAnnotation shape constructor, which takes a measurementPrecision property and a measurementPrecision property as its parameters, as demonstrated in the code snippet below:

let pspdfkitInstance; // Global or module-level variable.
PSPDFKit.load({
  ...baseOptions,
  theme: PSPDFKit.Theme.DARK,
  toolbarItems: [
    ...PSPDFKit.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: "2", // Simple string for precision.
      selected: true,
    };
    return [customAreaScale, ...documentScales];
  },
})
  .then(async (instance) => {
    console.log("Nutrient loaded!");
    try {
      // Define the bounding box for the rectangle.
      const rectangleBoundingBox = new PSPDFKit.Geometry.Rect({
        left: 100,
        top: 100,
        width: 200,
        height: 100,
      });

      // Create a rectangle annotation with `isMeasurement` and a linear `measurementScale`.
      const rectangleAnnotation = new PSPDFKit.Annotations.RectangleAnnotation({
        pageIndex: 0,
        boundingBox: rectangleBoundingBox,
        isMeasurement: true,
        measurementScale: {
          unitFrom: "pt", // Simple string for points.
          unitTo: "cm",   // Simple string for centimeters.
          fromValue: 1,
          toValue: 0.05, // Linear conversion factor
        },
        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 our playground. For more information on scale and precision, refer to the guide on configuring measurements.

Configuring measurements

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