Skip to content

Commit 6603724

Browse files
committed
docs(image): add readme docs
1 parent 52e97fd commit 6603724

File tree

1 file changed

+163
-0
lines changed

1 file changed

+163
-0
lines changed

packages/image/README.md

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,166 @@
33
</p>
44

55
# @react-pdf/image
6+
7+
Image parsing and resolution library for react-pdf. Handles PNG and JPEG images from various sources including local files, remote URLs, base64 data URIs, buffers, and blobs.
8+
9+
## Installation
10+
11+
```bash
12+
yarn add @react-pdf/image
13+
```
14+
15+
## Usage
16+
17+
```js
18+
import resolveImage from '@react-pdf/image';
19+
20+
const image = await resolveImage({ uri: './path/to/image.png' });
21+
22+
console.log(image.width); // Image width in pixels
23+
console.log(image.height); // Image height in pixels
24+
console.log(image.format); // 'png' or 'jpeg'
25+
console.log(image.data); // Buffer containing image data
26+
```
27+
28+
## Image Sources
29+
30+
The library supports multiple image source types:
31+
32+
### Local File
33+
34+
```js
35+
const image = await resolveImage({ uri: './image.png' });
36+
// or
37+
const image = await resolveImage({ uri: '/absolute/path/to/image.jpg' });
38+
```
39+
40+
> **Note:** Local file resolution is only available in Node.js environments.
41+
42+
### Remote URL
43+
44+
```js
45+
const image = await resolveImage({ uri: 'https://example.com/image.png' });
46+
```
47+
48+
With custom request options:
49+
50+
```js
51+
const image = await resolveImage({
52+
uri: 'https://example.com/image.png',
53+
method: 'GET',
54+
headers: {
55+
Authorization: 'Bearer token',
56+
},
57+
body: null,
58+
credentials: 'include',
59+
});
60+
```
61+
62+
### Base64 Data URI
63+
64+
```js
65+
const image = await resolveImage({
66+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
67+
});
68+
```
69+
70+
### Buffer
71+
72+
```js
73+
import fs from 'fs';
74+
75+
const buffer = fs.readFileSync('./image.png');
76+
const image = await resolveImage(buffer);
77+
```
78+
79+
### Blob (Browser)
80+
81+
```js
82+
const response = await fetch('https://example.com/image.png');
83+
const blob = await response.blob();
84+
const image = await resolveImage(blob);
85+
```
86+
87+
### Data Object
88+
89+
```js
90+
const image = await resolveImage({
91+
data: imageBuffer,
92+
format: 'png', // 'png', 'jpg', or 'jpeg'
93+
});
94+
```
95+
96+
## Caching
97+
98+
Images are cached by default to avoid redundant processing. You can disable caching for individual requests:
99+
100+
```js
101+
const image = await resolveImage({ uri: './image.png' }, { cache: false });
102+
```
103+
104+
The cache has a default limit of 30 entries and uses LRU (Least Recently Used) eviction.
105+
106+
## Types
107+
108+
### Image
109+
110+
The resolved image object:
111+
112+
```ts
113+
interface Image {
114+
width: number;
115+
height: number;
116+
data: Buffer;
117+
format: 'jpeg' | 'png';
118+
key?: string;
119+
}
120+
```
121+
122+
### ImageSrc
123+
124+
All supported image source types:
125+
126+
```ts
127+
type ImageSrc =
128+
| Blob
129+
| Buffer
130+
| DataImageSrc
131+
| LocalImageSrc
132+
| RemoteImageSrc
133+
| Base64ImageSrc;
134+
135+
type DataImageSrc = {
136+
data: Buffer;
137+
format: 'jpg' | 'jpeg' | 'png';
138+
};
139+
140+
type LocalImageSrc = {
141+
uri: string;
142+
format?: 'jpg' | 'jpeg' | 'png';
143+
};
144+
145+
type RemoteImageSrc = {
146+
uri: string;
147+
method?: 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
148+
headers?: Record<string, string>;
149+
format?: 'jpg' | 'jpeg' | 'png';
150+
body?: any;
151+
credentials?: 'omit' | 'same-origin' | 'include';
152+
};
153+
154+
type Base64ImageSrc = {
155+
uri: `data:image${string}`;
156+
};
157+
```
158+
159+
## Supported Formats
160+
161+
- **PNG** - Portable Network Graphics
162+
- **JPEG/JPG** - Joint Photographic Experts Group
163+
164+
JPEG images with EXIF orientation data are automatically handled, with width and height adjusted accordingly.
165+
166+
## License
167+
168+
MIT

0 commit comments

Comments
 (0)