Skip to content

Commit 868698f

Browse files
imagekitioimagekitio
committed
README file added
1 parent 260d78d commit 868698f

File tree

1 file changed

+231
-0
lines changed

1 file changed

+231
-0
lines changed

‎README.md

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
# ImageKit.io Javascript SDK
2+
3+
Javascript SDK for [ImageKit.io](https://imagekit.io) that implements the client-side upload and URL generation for use in the browser.
4+
5+
ImageKit is a complete image optimization and transformation solution that comes with an [image CDN](https://imagekit.io/features/imagekit-infrastructure) and media storage. It can be integrated with your existing infrastructure - storages like AWS S3, web servers, your CDN and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.
6+
7+
This SDK required jQuery, or more specifically the `$.ajax()`, method to be accessible globally.
8+
9+
## Installation
10+
11+
Download the `imagekit.js` file from the dist directory and load it using a `<script>` tag after loading jQuery.
12+
13+
```
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
15+
<script type="text/javascript" src="imagekit.js"></script>
16+
```
17+
18+
## Initialization
19+
20+
```
21+
var imagekit = new ImageKit({
22+
publicKey : "your_public_api_key",
23+
urlEndpoint : "https://ik.imagekit.io/your_imagekit_id",
24+
authenticationEndpoint : "http://www.yourserver.com/auth",
25+
});
26+
```
27+
28+
`publicKey` and `urlEndpoint` are mandatory parameters for SDK initialization.
29+
`authenticationEndpoint` is essential if you want to use the SDK for client-side uploads.
30+
31+
*Note: Do not include your Private Key in any client side code, including this SDK or its initialization. If you pass the `privateKey` parameter while initializing this SDK, it throws an error*
32+
33+
## Usage
34+
35+
You can use this SDK for URL generation and client-side file uploads.
36+
37+
### URL Generation
38+
39+
**1. Using image path and image hostname or endpoint**
40+
41+
This method allows you to create a URL using the `path` where the image exists and the URL endpoint (`urlEndpoint`) you want to use to access the image. You can refer to the documentation [here](https://docs.imagekit.io/imagekit-docs/url-endpoints) to read more about URL endpoints in ImageKit and the section about [image origins](https://docs.imagekit.io/imagekit-docs/configure-origin) to understand about paths with different kinds of origins.
42+
43+
```
44+
var imageURL = imagekit.url({
45+
path : "/default-image.jpg",
46+
urlEndpoint : "https://ik.imagekit.io/your_imagekit_id/endpoint/",
47+
transformation : [{
48+
"HEIGHT" : "300",
49+
"WIDTH" : "400"
50+
}]
51+
});
52+
```
53+
54+
This results in a URL like
55+
56+
```
57+
https://ik.imagekit.io/your_imagekit_id/endpoint/tr:h-300,w-400/default-image.jpg
58+
```
59+
60+
**2. Using full image URL**
61+
62+
This method allows you to add transformation parameters to an existing, complete URL that is already mapped to ImageKit using the `src` parameter. This method should be used if you have the complete URL mapped to ImageKit stored in your database.
63+
64+
65+
```
66+
var imageURL = imagekit.url({
67+
src : "https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg",
68+
transformation : [{
69+
"HEIGHT" : "300",
70+
"WIDTH" : "400"
71+
}]
72+
});
73+
```
74+
75+
This results in a URL like
76+
77+
```
78+
https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=h-300%2Cw-400
79+
```
80+
81+
82+
The `.url()` method accepts the following parameters
83+
84+
| Option | Description |
85+
| :----------------| :----------------------------- |
86+
| urlEndpoint | Optional. The base URL to be appended before the path of the image. If not specified, the URL Endpoint specified at the time of SDK initialization is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/ |
87+
| path | Conditional. This is the path at which the image exists. For example, `/path/to/image.jpg`. Either the `path` or `src` parameter need to be specified for URL generation. |
88+
| src | Conditional. This is the complete URL of an image already mapped to ImageKit. For example, `https://ik.imagekit.io/your_imagekit_id/endpoint/path/to/image.jpg`. Either the `path` or `src` parameter need to be specified for URL generation. |
89+
| transformation | Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. Different steps of a [chained transformation](https://docs.imagekit.io/imagekit-docs/chained-transformations) can be specified as different objects of the array. The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it gets applied as it is in the URL. |
90+
| transformationPostion | Optional. Default value is `path` that places the transformation string as a path parameter in the URL. Can also be specified as `query` which adds the transformation string as the query parameter `tr` in the URL. If you use `src` parameter to create the URL, then the transformation string is always added as a query parameter. |
91+
| queryParameters | Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and not necessarily related to ImageKit. Especially useful, if you want to add some versioning parameter to your URLs. |
92+
93+
#### Examples of generating URLs
94+
95+
**1. Chained Transformations as a query parameter**
96+
```
97+
var imageURL = imagekit.url({
98+
path : "/default-image.jpg",
99+
urlEndpoint : "https://ik.imagekit.io/your_imagekit_id/endpoint/",
100+
transformation : [{
101+
"HEIGHT" : "300",
102+
"WIDTH" : "400"
103+
}, {
104+
"ROTATION" : 90
105+
}],
106+
transformationPosition : "query"
107+
});
108+
```
109+
```
110+
https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=h-300%2Cw-400%3Art-90
111+
```
112+
113+
**2. Sharpening and contrast transforms and a progressive JPG image**
114+
115+
There are some transforms like [Sharpening](https://docs.imagekit.io/imagekit-docs/image-enhancement---color-manipulation) that can be added to the URL with or without any other value. To use such transforms without specifying a value, specify the value as "-" in the transformation object, otherwise, specify the value that you want to be added to this transformation.
116+
117+
```
118+
var imageURL = imagekit.url({
119+
src : "https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg",
120+
transformation : [{
121+
"FORMAT" : "jpg",
122+
"PROGRESSIVE" : "true",
123+
"EFFECT_SHARPEN" : "-",
124+
"EFFECT_CONTRAST" : "1"
125+
}]
126+
});
127+
```
128+
```
129+
//Note that because `src` parameter was used, the transformation string gets added as a query parameter `tr`
130+
https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=f-jpg%2Cpr-true%2Ce-sharpen%2Ce-contrast-1
131+
```
132+
133+
#### List of supported transformations
134+
135+
The complete list of transformations supported and their usage in ImageKit can be found [here](https://docs.imagekit.io/imagekit-docs/image-transformations). The SDK gives a name to each transformation parameter, making the code simpler and readable. If a transformation is supported in ImageKit, but a name for it cannot be found in the table below, then use the transformation code from ImageKit docs as the name when using in the `url` function.
136+
137+
| Supported Transformation Name | Translates to parameter |
138+
|-------------------------------|-------------------------|
139+
| HEIGHT | h |
140+
| WIDTH | w |
141+
| ASPECT_RATIO | ar |
142+
| QUALITY | q |
143+
| CROP | c |
144+
| CROP_MODE | cm |
145+
| X | x |
146+
| Y | y |
147+
| FOCUS | fo |
148+
| FORMAT | f |
149+
| RADIUS | r |
150+
| BACKGROUND | bg |
151+
| BORDER | bo |
152+
| ROTATION | rt |
153+
| BLUR | bl |
154+
| NAMED | n |
155+
| OVERLAY_IMAGE | oi |
156+
| OVERLAY_X | ox |
157+
| OVERLAY_Y | oy |
158+
| OVERLAY_FOCUS | ofo |
159+
| OVERLAY_HEIGHT | oh |
160+
| OVERLAY_WIDTH | ow |
161+
| OVERLAY_TEXT | ot |
162+
| OVERLAY_TEXT_FONT_SIZE | ots |
163+
| OVERLAY_TEXT_FONT_FAMILY | otf |
164+
| OVERLAY_TEXT_COLOR | otc |
165+
| OVERLAY_ALPHA | oa |
166+
| OVERLAY_TEXT_TYPOGRAPHY | ott |
167+
| OVERLAY_BACKGROUND | obg |
168+
| OVERLAY_IMAGE_TRIM | oit |
169+
| PROGRESSIVE | pr |
170+
| LOSSLESS | lo |
171+
| TRIM | t |
172+
| METADATA | md |
173+
| COLOR_PROFILE | cp |
174+
| DEFAULT_IMAGE | di |
175+
| DPR | dpr |
176+
| EFFECT_SHARPEN | e-sharpen |
177+
| EFFECT_USM | e-usm |
178+
| EFFECT_CONTRAST | e-contrast |
179+
| EFFECT_GRAY | e-grayscale |
180+
| ORIGINAL | orig |
181+
182+
183+
### File Upload
184+
185+
The SDK provides a simple interface using the `.upload()` method to upload files to the ImageKit Media Library. It accepts all the parameters supported by the [ImageKit Upload API](https://docs.imagekit.io/imagekit-docs/client-side-file-upload).
186+
187+
The `upload()` method requires at least the `file` and the `fileName` parameter as an input from the user. The `publicKey` parameter is added automatically. Additionally, this method uses the `authenticationEndpoint` that is specified at the time of SDK initialization. Client-side file upload requires a token, expiry timestamp and signature, and these values can be safely generated on the server-side using your ImageKit account's private key.
188+
189+
The SDK issues a GET request to the authentication endpoint provided and the endpoint must respond with a JSON object with the values for `token`, `signature` and `expire`.
190+
191+
For example, you can use ImageKit's NodeJS SDK which implements the `getAuthenticationParameters` method to create a simple API endpoint like this on your server and provide the API endpoint as the `authenticationEndpoint` parameter.
192+
193+
```
194+
app.get('/auth', function(req, res) {
195+
res.send(imagekit.getAuthenticationParameters());
196+
});
197+
```
198+
199+
This method returns a callback with the `error` and `result` as arguments.
200+
201+
You can pass other parameters supported by the ImageKit upload API using the same parameter name as specified in the upload API documentation. For example, to specify tags for a file at the time of upload use the `tags` parameter as specified in the [documentation here](https://docs.imagekit.io/imagekit-docs/client-side-file-upload).
202+
203+
Sample usage
204+
```
205+
<form action="#" onsubmit="upload()">
206+
<input type="file" id="my-file" />
207+
<input type="submit" />
208+
</form>
209+
210+
<script>
211+
function upload(data) {
212+
var file = document.getElementById("my-file");
213+
imagekit.upload({
214+
file : file.files[0],
215+
fileName : "abc.jpg",
216+
tags : ["tag1"]
217+
}, function(err, result) {
218+
console.log(arguments);
219+
console.log(imagekit.url({
220+
src: result.url,
221+
transformation : [{ HEIGHT: 300, WIDTH: 400}]
222+
}));
223+
});
224+
}
225+
</script>
226+
```
227+
228+
If the upload succeed, `err` will be `null` and the `result` will be the same as what is received from ImageKit's servers.
229+
If the upload fails, `err` will be the same as what is received from ImageKit's servers and the `result` will be null.
230+
231+

0 commit comments

Comments
 (0)