Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yoannchb-pro/jimg
Merge multiple images into one single image
https://github.com/yoannchb-pro/jimg
canvas compression format image image-processing join merge nodejs resize-images truncate
Last synced: about 1 month ago
JSON representation
Merge multiple images into one single image
- Host: GitHub
- URL: https://github.com/yoannchb-pro/jimg
- Owner: yoannchb-pro
- License: mit
- Created: 2022-08-15T17:24:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-23T15:50:56.000Z (over 2 years ago)
- Last Synced: 2024-11-24T17:31:03.329Z (about 2 months ago)
- Topics: canvas, compression, format, image, image-processing, join, merge, nodejs, resize-images, truncate
- Language: TypeScript
- Homepage:
- Size: 99.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jimg
> **Note:** The README is inspired from merge-images by Luke Childs but it's not the same package and fonctionnalities
Merge, truncat, compress, resize, convert, edit multiple images into one single image on nodejs and in the browser.
## Install
```
$ npm install --save jimg
```
## Usage
With the following images:
| `/body.png` | `/eyes.png` | `/mouth.png` |
| ----------------------------------------- | ----------------------------------------- | ------------------------------------------ |
| 
| 
| 
|
You can do:
```js
const jimg = require("jimg");
jimg({ images: ["/body.png", "/eyes.png", "/mouth.png"] }).then(
(b64) => (document.querySelector("img").src = b64)
);
// data:image/png;base64,iVBORw0KGgoAA...
```
Or in the browser
```html
```
And that would update the `img` element to show this image:
## Saving image
This is how to save an image to a specific location on nodejs or in the browser
```js
jimg({
path: "./merged.png",
images: ["/body.png", "/eyes.png", "/mouth.png"],
}).then((b64) => (document.querySelector("img").src = b64));
// data:image/png;base64,iVBORw0KGgoAA...
```
## Positioning and resizing
Those source png images were already the right dimensions to be overlaid on top of each other. You can also supply an array of objects with x/y co-ords to manually position each image or resize an image with width/height:
```js
jimg({
images: [
{ path: 'body.png', x: 0, y: 0 },
{ path: 'eyes.png', x: 32, y: 0, width: 256, height: 256 },
{ path: 'mouth.png', x: 16, y: 0 }
]
})
.then(b64 => ...);
// data:image/png;base64,iVBORw0KGgoAA...
```
Using the same source images as above would output this:
### Opacity
The opacity can also be tweaked on each image.
```js
jimg({
images: [
{ path: 'body.png' },
{ path: 'eyes.png', opacity: 0.7 },
{ path: 'mouth.png', opacity: 0.3 }
]
})
.then(b64 => ...);
// data:image/png;base64,iVBORw0KGgoAA...
```
### Truncat
You can simply truncat an image by using truncat property (x, y, width and height are optionals)
```js
jimg({
images: ["/body.png", "/eyes.png", "/mouth.png"],
truncat: { x: 0, y: 0, width: 128, height: 128 }
}).then(
b64 => ...
);
// data:image/png;base64,iVBORw0KGgoAA...
```
Which will look like this:
## Quality
You can custom the quality of the image to compress it. Default is 0.92.
```js
jimg({
images: ["/body.png", "/eyes.png", "/mouth.png"],
quality: 0.7
}).then(
b64 => ...
);
// data:image/png;base64,iVBORw0KGgoAA...
```
## Format
Custom the format in jpg for example
```js
jimg({
images: ["/body.png", "/eyes.png", "/mouth.png"],
format: 'image/jpeg'
}).then(
b64 => ...
);
// data:image/png;base64,iVBORw0KGgoAA...
```
## Canvas
Custom the canvas. Can be an instance of document canvas or nodejs canvas package.
```js
jimg({
images: ["/body.png", "/eyes.png", "/mouth.png"],
canvas: document.querySelector("canvas") //of createCanvas()
}).then(
b64 => ...
);
// data:image/png;base64,iVBORw0KGgoAA...
```
## License
MIT © yoannchb