renderPageRect
Renders a specific rectangular portion of a PDF page into an image.
Signature
renderPageRect(
doc: PdfDocumentObject,
page: PdfPageObject,
rect: Rect,
options?: PdfRenderPageOptions
): PdfTask<T>;Description
This method is useful for features like “zoom-in” rendering or highlighting a specific area without rendering the entire page. It crops the output to the specified rectangle, which can be significantly more efficient than rendering the full page and cropping it manually.
The generic type T will be a Blob in browser environments and a Buffer in Node.js.
Parameters
| Name | Type | Description |
|---|---|---|
doc | PdfDocumentObject | The handle of the document to render from. |
page | PdfPageObject | The specific page object where the rectangle is located. |
rect | Rect | The rectangular area on the page to render, in page coordinates. |
options | PdfRenderPageOptions | (Optional) An object to customize rendering (scaling, rotation, etc.). |
Rect Interface
The Rect interface can be imported from @embedpdf/models.
import { Rect } from '@embedpdf/models';
export interface Rect {
origin: { x: number; y: number };
size: { width: number; height: number };
}PdfRenderPageOptions Details
| Option | Type | Description |
|---|---|---|
scaleFactor | number | The render scaling factor (zoom level). Default: 1.0. |
rotation | Rotation | The rotation to apply in degrees (0, 90, 180, 270). Default: Rotation.Degree0. |
dpr | number | The Device Pixel Ratio, used for rendering crisp images on high-resolution screens. Default: 1. |
imageType | 'image/webp' | 'image/png' | 'image/jpeg' | The output image format. Default: 'image/webp'. |
withAnnotations | boolean | Set to true to include annotations in the rendered image. Default: false. |
Returns
PdfTask<T>
A Task that resolves with the rendered image of the specified rectangle (Blob or Buffer).
The Task will be rejected if the document or page handle is invalid.
See Concepts: Tasks for more on how to handle asynchronous operations.
Example
// Assuming 'engine' and an open 'document' object are available
async function renderZoomedArea(doc, page) {
try {
// Define a rectangle to capture the top-left quadrant of the page
const cropArea = {
origin: { x: 0, y: 0 },
size: {
width: page.size.width / 2,
height: page.size.height / 2
},
};
const imageBlob = await engine.renderPageRect(doc, page, cropArea).toPromise();
// Display the cropped image
const imageUrl = URL.createObjectURL(imageBlob);
document.getElementById('my-cropped-image').src = imageUrl;
} catch (error) {
console.error('Failed to render page rect:', error);
}
}See Also
Need Help?
Join our community for support, discussions, and to contribute to EmbedPDF's development.