Skip to content

Commit 4bad591

Browse files
committed
feat: add examples for URL generation and transformations in README
1 parent 738f6d9 commit 4bad591

File tree

1 file changed

+196
-0
lines changed

1 file changed

+196
-0
lines changed

README.md

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,202 @@ await client.files.upload({ file: await toFile(Buffer.from('my bytes'), 'file'),
9494
await client.files.upload({ file: await toFile(new Uint8Array([0, 1, 2]), 'file'), fileName: 'fileName' });
9595
```
9696

97+
## URL generation
98+
99+
The ImageKit SDK provides a powerful `helper.buildSrc()` method for generating optimized image and video URLs with transformations. Here are examples ranging from simple URLs to complex transformations with overlays and signed URLs.
100+
101+
### Basic URL generation
102+
103+
Generate a simple URL without any transformations:
104+
105+
```ts
106+
import ImageKit from '@imagekit/nodejs';
107+
108+
const client = new ImageKit({
109+
privateKey: process.env['IMAGEKIT_PRIVATE_KEY']
110+
});
111+
112+
// Basic URL without transformations
113+
const url = client.helper.buildSrc({
114+
urlEndpoint: 'https://ik.imagekit.io/your_imagekit_id',
115+
src: '/path/to/image.jpg',
116+
});
117+
// Result: https://ik.imagekit.io/your_imagekit_id/path/to/image.jpg
118+
```
119+
120+
### URL generation with transformations
121+
122+
Apply common transformations like resizing, cropping, and format conversion:
123+
124+
```ts
125+
// URL with basic transformations
126+
const transformedUrl = client.helper.buildSrc({
127+
urlEndpoint: 'https://ik.imagekit.io/your_imagekit_id',
128+
src: '/path/to/image.jpg',
129+
transformation: [
130+
{
131+
width: 400,
132+
height: 300,
133+
crop: 'maintain_ratio',
134+
quality: 80,
135+
format: 'webp',
136+
},
137+
],
138+
});
139+
// Result: https://ik.imagekit.io/your_imagekit_id/path/to/image.jpg?tr=w-400,h-300,c-maintain_ratio,q-80,f-webp
140+
```
141+
142+
### URL generation with image overlay
143+
144+
Add image overlays to your base image:
145+
146+
```ts
147+
// URL with image overlay
148+
const imageOverlayUrl = client.helper.buildSrc({
149+
urlEndpoint: 'https://ik.imagekit.io/your_imagekit_id',
150+
src: '/path/to/base-image.jpg',
151+
transformation: [
152+
{
153+
width: 500,
154+
height: 400,
155+
overlay: {
156+
type: 'image',
157+
input: '/path/to/overlay-logo.png',
158+
position: {
159+
x: 10,
160+
y: 10,
161+
},
162+
transformation: [
163+
{
164+
width: 100,
165+
height: 50,
166+
},
167+
],
168+
},
169+
},
170+
],
171+
});
172+
// Result: URL with image overlay positioned at x:10, y:10
173+
```
174+
175+
### URL generation with text overlay
176+
177+
Add customized text overlays:
178+
179+
```ts
180+
// URL with text overlay
181+
const textOverlayUrl = client.helper.buildSrc({
182+
urlEndpoint: 'https://ik.imagekit.io/your_imagekit_id',
183+
src: '/path/to/base-image.jpg',
184+
transformation: [
185+
{
186+
width: 600,
187+
height: 400,
188+
overlay: {
189+
type: 'text',
190+
text: 'Sample Text Overlay',
191+
position: {
192+
x: 50,
193+
y: 50,
194+
focus: 'center',
195+
},
196+
transformation: [
197+
{
198+
fontSize: 40,
199+
fontFamily: 'Arial',
200+
fontColor: 'FFFFFF',
201+
typography: 'b', // bold
202+
},
203+
],
204+
},
205+
},
206+
],
207+
});
208+
// Result: URL with bold white Arial text overlay at center position
209+
```
210+
211+
### URL generation with multiple overlays
212+
213+
Combine multiple overlays for complex compositions:
214+
215+
```ts
216+
// URL with multiple overlays (text + image)
217+
const multipleOverlaysUrl = client.helper.buildSrc({
218+
urlEndpoint: 'https://ik.imagekit.io/your_imagekit_id',
219+
src: '/path/to/base-image.jpg',
220+
transformation: [
221+
{
222+
width: 800,
223+
height: 600,
224+
overlay: {
225+
type: 'text',
226+
text: 'Header Text',
227+
position: { x: 20, y: 20 },
228+
transformation: [{ fontSize: 30, fontColor: '000000' }],
229+
},
230+
},
231+
{
232+
overlay: {
233+
type: 'image',
234+
input: '/watermark.png',
235+
position: { focus: 'bottom_right' },
236+
transformation: [{ width: 100, opacity: 70 }],
237+
},
238+
},
239+
],
240+
});
241+
// Result: URL with text overlay at top-left and semi-transparent watermark at bottom-right
242+
```
243+
244+
### Signed URLs for secure delivery
245+
246+
Generate signed URLs that expire after a specified time for secure content delivery:
247+
248+
```ts
249+
// Generate a signed URL that expires in 1 hour (3600 seconds)
250+
const signedUrl = client.helper.buildSrc({
251+
urlEndpoint: 'https://ik.imagekit.io/your_imagekit_id',
252+
src: '/private/secure-image.jpg',
253+
transformation: [
254+
{
255+
width: 400,
256+
height: 300,
257+
quality: 90,
258+
},
259+
],
260+
signed: true,
261+
expiresIn: 3600, // URL expires in 1 hour
262+
});
263+
// Result: URL with signature parameters (?ik-t=timestamp&ik-s=signature)
264+
265+
// Generate a signed URL that doesn't expire
266+
const permanentSignedUrl = client.helper.buildSrc({
267+
urlEndpoint: 'https://ik.imagekit.io/your_imagekit_id',
268+
src: '/private/secure-image.jpg',
269+
signed: true,
270+
// No expiresIn means the URL won't expire
271+
});
272+
// Result: URL with signature parameter (?ik-s=signature)
273+
```
274+
275+
### Authentication parameters for client-side uploads
276+
277+
Generate authentication parameters for secure client-side file uploads:
278+
279+
```ts
280+
// Generate authentication parameters for client-side uploads
281+
const authParams = client.helper.getAuthenticationParameters();
282+
console.log(authParams);
283+
// Result: { token: 'uuid-token', expire: timestamp, signature: 'hmac-signature' }
284+
285+
// Generate with custom token and expiry
286+
const customAuthParams = client.helper.getAuthenticationParameters('my-custom-token', 1800);
287+
console.log(customAuthParams);
288+
// Result: { token: 'my-custom-token', expire: 1800, signature: 'hmac-signature' }
289+
```
290+
291+
These authentication parameters can be used in client-side upload forms to securely upload files without exposing your private API key.
292+
97293
## Handling errors
98294

99295
When the library is unable to connect to the API,

0 commit comments

Comments
 (0)