Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 26 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,61 @@
# LibPixel

`libpixel.js` allows developers to use the services of LibPixel in their web applications without having to rely on other dependencies. The service allows you to generate and sign URLs.

[![NPM Version](https://img.shields.io/npm/v/libpixel)](https://www.npmjs.com/package/libpixel)
[![Build Status](https://travis-ci.org/libpixel/libpixel-js.svg?branch=master)](https://travis-ci.org/libpixel/libpixel-js)
[![Minified Size](https://img.shields.io/bundlephobia/min/libpixel)](https://bundlephobia.com/result?p=libpixel)
[![License](https://img.shields.io/github/license/libpixel/libpixel-js)](https://github.com/libpixel/libpixel-js/blob/master/LICENSE)

---

## Introduction

JavaScript library to generate and sign LibPixel URLs.
With the help of `libpixel.js` you can generate responsive images by defining the paremeters and letting the library generate the signed URLs. The generated and signed URLs can be used by setting the `src` attribute of the `img` element. `picture` element can be used to create a more responsive system that loads specific images according to the resolution and orientation of devices.

## Install

```bash
$ npm install libpixel
```
There are two ways to install `libpixel.js`:


1: **npm**: `$ npm install libpixel`
2: **Manually**: Download the [latest release](https://github.com/libpixel/libpixel-js/releases) and use the JavaScript files in the `src` folder.


## Usage

Start by requiring the module and creating an instance of the client.
`libpixel.js` is pretty simple to get started with. You just start by requiring the module and creating an instance of the client. The only required attribute is `host`, which should contain your LibPixel `domain` that you will setup while [signing up](https://dashboard.libpixel.com/users/sign_up).

```js
var LibPixel = require("libpixel");
var libpx = new LibPixel({ host: "test.libpx.com" });
var libpx = new LibPixel({ host: "your-domain.libpx.com" });
```

In addition to `host`, the following options are supported:
In addition to `host`, the following attributes are supported:

* `secret`: Auth secret for your LibPixel account. Required for signing requests.
* `https`: Generate HTTPS URLs. Default is `false`.

After initializing the LibPixel client, you are ready to start using `libpixel.js`. With the help of it, you can sign existing URLs to enable LibPixel support by using the `sign()` method, or you can generate and sign new URLs at the same time by using the `url()` method of the LibPixel client.

Regardless of what method you use, the output will be a signed URL, which can then use in the `src` attribute of your `img` elements to provide processed images that meet your requirements.

### Sign URLs

You can sign an existing URL using the `sign` function:
You can sign an existing URL using the `sign()` method:

```js
var url = libpx.sign("http://test.libpx.com/images/1.jpg?width=400");
```

### Generate URLs

You can also generate and sign URLs at the same time with the `url` function:
You can also generate and sign URLs at the same time with the `url()` method:

```js
var url = libpx.url("/images/1.jpg", { height: 400, blur: 20, saturation: -80 });
```

## License

[MIT](LICENSE)
`libpixel.js` is owned by [LibPixel](https://www.libpixel.com/) and is licensed under the [MIT](LICENSE) license. Contributions are welcomed.