Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yeonjuan/mode-image
https://github.com/yeonjuan/mode-image
cavnas crop image-manipulation image-processing resize
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/yeonjuan/mode-image
- Owner: yeonjuan
- License: mit
- Created: 2021-08-11T12:27:20.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-08-14T10:59:10.000Z (over 3 years ago)
- Last Synced: 2024-06-11T17:33:19.913Z (7 months ago)
- Topics: cavnas, crop, image-manipulation, image-processing, resize
- Language: TypeScript
- Homepage:
- Size: 274 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mode-image
Simple image editing library.
- [Installation](#installation)
- [Usage](#Usage)
- [License](#license)
## Installation
- npm
```console
npm install mode-image
```
- yarn
```console
yarn add mode-image
```
## Usage
- [modeImage](#modeimageimage-source)
- [rotate](#rotateradian)
- [resize](#resizesize)
- [crop](#croparea)
- [repeatX](#repeatxnum)
- [repeatY](#repeatynum)
- [merge](#mergeimage)
- [toDataURL](#todataurl)
### modeImage(_image source_)
We can specify image source to editing using `modeImage(image source)`.
- Image URL
```js
modeImage("/public/foo.png")
.rotate(angle)
.crop(area)
// ...
.toDataURL()
.then((result) => {
result; // data:image/png;base64,R0lGOD....
});
```
- Data URL
The URLs string prefixed with the `data:image/...` scheme. see [MDN Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
```js
modeImage("data:image/png;base64,R0lGOD....")
.rotate(angle)
.crop(area)
// ...
.toDataURL()
.then((result) => {
result; // data:image/png;base64,R0lGOD....
});
```
- HTMLImageElement
The instance of [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement).
```js
const image = new Image();
image.src = "https://...";
modeImage(image)
.rotate(angle)
.crop(area)
// ...
.toDataURL()
.then((result) => {
result; // data:image/png;base64,R0lGOD....
});
```
- in NodeJS
In NodeJS, we should use custom image, canvas creator. see [node-canvas](https://github.com/Automattic/node-canvas).
```js
import { createCanvas, Image, loadImage } from "canvas";
const options = {
createCanvas: createCanvas,
createImage: () => new Image(),
};
const image = await loadImage("./path/foo.png");
modeImage(image, options)
.rotate()
.toDataURL()
.then((result) => {
result; // data:image/png;base64,R0lGOD....
});
```
### .rotate(_radian_)
- radian (number): The rotation angle, clockwise in radians.
#### example
| /origin.png (100 x 100) | result (100 x 100) |
| -------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| 
| 
|
```js
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.rotate((Math.PI / 180) * 90)
.toDataUrl();
// data:image/png;base64,...
```
### .resize(_size_)
- size (object):
- width (number): The height to change.
- height (number): The width to change.
#### example
| /origin.png (150 x 150) | result (50 x 50) |
| -------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| 
| 
|
```js
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.resize({
width: 50,
height: 50,
})
.toDataUrl();
// data:image/png;base64,...
```
### .crop(_area_)
- area (object):
- x (number): The pixels from left side.
- y (number): The Pixels from right side.
- width (number): The width pixels of the crop.
- height (number): The height pixels of the crop.
#### example
| /origin.png (150 x 150) | result (50 x 50) |
| -------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| | 
|
```js
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.crop({
x: 50,
y: 50,
width: 50,
height: 50,
})
.toDataUrl();
// data:image/png;base64,...
```
### .repeatX(_num_)
- num (number): The number of times to repeat.
#### example
| /origin.png (150 x 150) | result (450 x 150) |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| 
| 
|
```js
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.repeatX(3)
.toDataUrl();
// data:image/png;base64,...
```
### .repeatY(_num_)
- num (number): The number of times to repeat.
#### example
| /origin.png (150 x 150) | result (150 x 300) |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| | 
|
```js
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.repeatY(2)
.toDataUrl();
// data:image/png;base64,...
```
### .merge(_image_)
- image (image source): The image source merging with the current image. It support same data type with ``
#### example
| /left.png (100 x 50) | /right.png (100 x 50) | result (100 x 50) |
| ------------------------------------------------------ | ------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| 
| 
| 
|
```js
import modeImage from "mode-image";
const result = await modeImage("/left.png")
.merge("/right.png")
.toDataUrl();
// data:image/png;base64,...
```
## License
[MIT](./LICENSE)