Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neplexlabs/illustrator.js
JavaScript image processing library
https://github.com/neplexlabs/illustrator.js
api canvas hacktoberfest image javascript nodejs processing
Last synced: 10 days ago
JSON representation
JavaScript image processing library
- Host: GitHub
- URL: https://github.com/neplexlabs/illustrator.js
- Owner: neplexlabs
- License: mit
- Created: 2022-05-23T13:16:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-17T17:30:13.000Z (over 1 year ago)
- Last Synced: 2024-07-11T21:17:58.526Z (4 months ago)
- Topics: api, canvas, hacktoberfest, image, javascript, nodejs, processing
- Language: TypeScript
- Homepage: https://illustrator.js.org
- Size: 6.53 MB
- Stars: 43
- Watchers: 4
- Forks: 3
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
---
# Installation
```powershell
# install with npm
$ npm install illustrator.js
# install with yarn
$ yarn add illustrator.js
```
🎉 No build tools required!
# Features
- Illustrator is fast, powered by **[@napi-rs/canvas](https://github.com/Brooooooklyn/canvas)** 🚀
- Illustrator provides beginner friendly API 🤓
- TypeScript supported 💪
- Layers API 🎚️
- Color utilities API 🎨
- Filters 📸
- Tools such as eraser, shapes, text, etc. ⚒️
- Image manipulation (crop, brightness, blur, sharpness, format conversion, compression and much more..)
- Animation API (GIF) 😎
and more...
# Documentation
**[https://illustrator.js.org](https://illustrator.js.org)**
# npm
**[https://www.npmjs.com/package/illustrator.js](https://www.npmjs.com/package/illustrator.js)**
# Quick Example
## Creating GIF
```js
// import
import { Illustrator } from "illustrator.js";
import fs from "fs";
// create illustrator instance
const illustrator = new Illustrator(512, 512);
// colors array
const colors = ["#FFFFFF", "#FF0000", "#FFFF00", "#FF00FF", "#00FF00", "#0000FF"];
// for a color in colors array, create new layer and fill the layer with that color
for (const color of colors) {
// create new layer
const layer = illustrator.layers.createLayer({
name: color
});
// create background color tool
const bgTool = layer.tools.get("BackgroundColorTool");
// set fill color
bgTool.setFillColor(color);
// fill background
bgTool.fill(0, 0, illustrator.width, illustrator.height);
// render this tool to the layer
bgTool.render();
}
// get animation api
const animation = illustrator.animation;
// get all layers and transform to animation frame
const layers = illustrator.layers.getAllLayers().map((m) => ({
duration: 500,
frame: m.layer
}));
// animation config, set repeat to infinite (or 0) and add our layers to frames
animation.setRepeat(0).addFrames(layers);
// render the frames
const output = await animation.createAnimation();
// write the output file
output.pipe(fs.createWriteStream("./animation.gif"));
```
#### Output Preview
## Other Examples
#### XP Card
[View Source](https://github.com/DevAndromeda/illustrator.js/tree/main/examples/rank-card)
##### Check out **[~/examples](https://github.com/DevAndromeda/illustrator.js/tree/main/examples)** for more.
# Canvacord
It may be hard to get simple things done via this library.
Check out **[Canvacord](https://github.com/CesiumLabs/canvacord)** for beginner-friendly utility APIs, built with **Illustrator.js**.
# Special thanks to 💖
[Brooooooklyn](https://github.com/Brooooooklyn) and the people behind [napi-rs](https://github.com/napi-rs). Illustrator.js is here only because of their hard work behind the projects under napi-rs.
# Discord
Join my official Discord server: **[https://discord.gg/CR8JxrxSwr](https://discord.gg/CR8JxrxSwr)**
# Help me keep this project alive
[](https://ko-fi.com/G2G05KFHP)
