Crop PDFs Using JavaScript

We shipped the document crop tool in PSPDFKit for Web 2021.5.0. You can use it to crop a single page or multiple pages at a time.

Launch Demo

Document Crop is only available to customers who have purchased the Document Editor component. If you want to try it, please get in touch with our sales team.

There are two ways in which you can crop a document: using our user interface, or using our programmatic API.

Via the User Interface

You can find the Document Crop tool in the Document Editor dropdown present in the main toolbar. Once you click on it, your interactionMode will change to PSPDFKit.InteractionMode.DOCUMENT_CROP. Now you can go to any page and select the cropping area by clicking on the page and dragging your cursor.

Once you’ve defined the cropping area, you can select whether you want to crop the current page or apply the same cropping area to all the pages.

We also added the following event listeners for if you want to perform a specific task just after the start or end of the crop area change:

type CallbackOption = {
  cropBox: Rect;
  pageIndex: number;
};

instance.addEventListener("cropArea.changeStart", (opts: CallbackOption) => {});
instance.addEventListener("cropArea.changeStop", (opts: CallbackOption) => {});

Via the Programmatic API

You can use PSPDFKit.Instance#applyOperations to crop the pages of the PDF document:

await instance.applyOperations([
  {
    type: "cropPages",
    pageIndexes: [1, 2],
    cropBox: new PSPDFKit.Geometry.Rect({
      left: 10,
      top: 10,
      width: 100,
      height: 100
    })
  }
]);

If you omit the pageIndexes property from the above code, all the PDF document’s pages will be cropped.