Render Image

This API allows rendering a specified PDF page as an image. It is useful for generating previews or exporting page content.

The returned data type is base64-encoded, which can be used directly for display or saving as an image file.

Method Declaration

renderPage({
        pageIndex,
        width,
        height,
        backgroundColor = '#FFFFFF',
        drawAnnot = true,
        drawForm = true,
        pageCompression = CPDFPageCompression.PNG
    } : {
        pageIndex: number,
        width: number,
        height: number,
        backgroundColor?: HexColor,
        drawAnnot?: boolean,
        drawForm?: boolean,
        pageCompression?: CPDFPageCompression
    })

Parameters

Parameter	Type	Required	Description
pageIndex	int	Yes	The index of the page to render, starting from 0
width	int	Yes	Width of the rendered image in pixels
height	int	Yes	Height of the rendered image in pixels
backgroundColor	Color	No	Page background color, default is white, Android only
drawAnnot	bool	No	Whether to render annotations, default true, Android only
drawForm	bool	No	Whether to render form fields, default true, Android only
pageCompression	CPDFPageCompression	No	Rendering format, png, jpeg

Example Usage

// Get the size of the specified page
const size = await pdfReaderRef.current?._pdfDocument.getPageSize(pageIndex);
// Render the page as an image and return a base64 string
const image = await pdfReaderRef.current?._pdfDocument.renderPage({
  pageIndex,
  width: size.width,
  height: size.height,
  backgroundColor: '#FFFFFF',
  drawAnnot: true,
  drawForm: true,
});

// Displaying rendered images in React Native
<Image  source={{ uri: CPDFImageUtil.base64ToUri(image) }} 
  style={{ width: '90%', height: '90%', resizeMode: 'contain', alignSelf: 'center' }}/>