Skip to content

Commit 68c4907

Browse files
amoutonbradyamoutonbrady
committed
🎉 Initial commit
0 parents  commit 68c4907

File tree

11 files changed

+497
-0
lines changed

11 files changed

+497
-0
lines changed

‎.github/demo.gif

110 KB
Loading

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎.prettierrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all"
4+
}

‎README.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# `imagine`
2+
3+
A minimalistic, dependency free library to merge multiple images into one.
4+
5+
<img src=".github/demo.gif">
6+
7+
## Why?
8+
9+
The specific use case case that led to the making of this library is to be able to create a single image from many for idendity documents upload.
10+
Say you have to upload the recto and verso of your idenditity paper but your backend only accept a single file. This is where `imagine` comes in handy.
11+
12+
=> [a] + [b] = [ab]
13+
14+
## Installation
15+
16+
```bash
17+
# npm
18+
$ npm install imagine
19+
20+
# pnpm
21+
$ pnpm add imagine
22+
23+
# yarn
24+
$ yarn add imagine
25+
```
26+
27+
## Usage
28+
29+
```js
30+
import { imagine } from 'imagine';
31+
32+
const img = document.querySelector('img');
33+
const input = document.querySelector('input');
34+
35+
input.addEventListener('change', async (e) => {
36+
const { files } = e.target;
37+
38+
const [src, blob] = await imagine(files, {
39+
direction: 'vertical',
40+
gap: 100,
41+
color: 'red',
42+
});
43+
44+
img.src = src;
45+
46+
uploadImage(blob);
47+
});
48+
```
49+
50+
## API
51+
52+
### imagine(sources: string[] | FileList, options?: Partial<Options>): Promise<[string, Blob]>
53+
54+
`imagine` takes a list of strings (which should be a list of URLs) or a `FileList` which is what `e.target.files` returns on an input of type file.
55+
56+
### options
57+
58+
Type: `Object`
59+
60+
List of options to pass as a second argument to `imagine`
61+
62+
#### options.gap
63+
64+
Type: `number`
65+
Default: 0
66+
67+
A number indicating the gap (in pixels) between each images.
68+
69+
#### options.direction
70+
71+
Type: `'horizontal' | 'vertical'`
72+
Default: 'horizontal'
73+
74+
A string indicating in which direction the image are going to be glued together.
75+
76+
#### options.type
77+
78+
Type: `string & ('image/jpeg' | 'image/png' | 'image/webp')`
79+
Default: 'image/png'
80+
81+
A string indicating the image format.
82+
83+
#### options.quality
84+
85+
Type: `number`
86+
Default: 0.92
87+
88+
A number between **0 and 1** indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.
89+
90+
#### options.color
91+
92+
Type: `string | CanvasGradient | CanvasPattern`
93+
94+
A string, canvas gradient or canvas pattern used to fill the background.
95+
There is no default.
96+
97+
## Contribute
98+
99+
- Fork the repo.
100+
- Clone the repo. locally
101+
- Run `pnpm install` (you might need to install [pnpm](https://pnpm.js.org/) first)
102+
- Run `pnpm dev`
103+
- Open `localhost:3000` and do your changes to [src/imagine.ts](./src/index.ts)
104+
- Commit & push
105+
- Make a PR
106+
107+
## Prior work
108+
109+
- [merge-images][https://github.com/lukechilds/merge-images] - A library to merge and compose images on top of each other. `imagine` is inspired by it.

‎package.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "imagine",
3+
"version": "0.0.0",
4+
"description": "0 dependencies, less than 1kb library to glue images together",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/amoutonbrady/imagine.git"
8+
},
9+
"files": [
10+
"dist"
11+
],
12+
"main": "./dist/imagine.umd.js",
13+
"module": "./dist/imagine.es.js",
14+
"browser": "./dist/imagine.iife.js",
15+
"types": "./dist/imagine.d.ts",
16+
"exports": {
17+
".": {
18+
"import": "./dist/imagine.es.js",
19+
"require": "./dist/imagine.umd.js",
20+
"browser": "./dist/imagine.iife.js"
21+
}
22+
},
23+
"scripts": {
24+
"dev": "vite",
25+
"build": "vite build && tsc",
26+
"format": "prettier --write \"{src,playground}/**/*.{html,ts}\"",
27+
"check": "package-check"
28+
},
29+
"keywords": [
30+
"image",
31+
"merge",
32+
"image-merge",
33+
"glue-images"
34+
],
35+
"author": "Alexandre Mouton-Brady",
36+
"license": "MIT",
37+
"devDependencies": {
38+
"@skypack/package-check": "^0.2.2",
39+
"@types/node": "^14.14.27",
40+
"prettier": "^2.2.1",
41+
"typescript": "^4.2.0-beta",
42+
"vite": "^2.0.0-beta.69"
43+
}
44+
}

‎playground/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<input type="file" multiple />
11+
<img src="" alt="" style="width: 50vw; display: block" />
12+
<script src="/index.ts" type="module"></script>
13+
</body>
14+
</html>

‎playground/index.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { imagine } from '../src/imagine';
2+
3+
const input = document.querySelector('input');
4+
const img = document.querySelector('img');
5+
6+
input.addEventListener('change', async (e) => {
7+
const { files } = e.target as HTMLInputElement;
8+
const [src] = await imagine(files);
9+
img.src = src;
10+
});

‎pnpm-lock.yaml

Lines changed: 146 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)