Releases: neplextech/canvacord
Releases · neplextech/canvacord
v6.0.2
What's Changed
- leaderboard variants by @notunderctrl
- chore: install yarn binary instead of using corepack by @twlite in #199
- Add invisible StatusData by @DylanDelobel in #201
- Guide translate rank card by @DylanDelobel in #203
- 🎨 Update NeoClassicalCard to include 'invisible' status color by @DylanDelobel in #202
New Contributors
- @DylanDelobel made their first contribution in #201
Full Changelog: v6.0.1...v6.0.2
Contributors
DylanDelobel, twlite, and notunderctrl
Assets 2
v6.0.1
v6.0.0
Canvacord v6.0.0 is here!
🚀 Easily generate images using html and css in nodejs. Canvacord is suitable for creating dynamic images such as social media posts, greetings cards, memes, etc. It is also possible to create your own templates and builders to generate images. You are only limited by your imagination.
Features
- 🪟 Open source, no privacy issues, 100% transparent - Canvacord is completely open source and free to use. This makes everything transparent and you can even contribute to the project. Best of all, you dont have to worry about privacy issues 😊.
- 💪 Easy to use - Canvacord provides a simple api to generate images on-the-fly.
- 🎨 Customizable - You can create your own templates and builders to generate images. Canvacord allows you to define how your image should look using html and css. No more hassle learning complicated canvas api.
- 🚀 Fast - Canvacord is powered by highly optimized, battle tested libraries, which makes it fast and reliable.
- 🔒 Typescript support - Canvacord is written in typescript and provides type definitions out of the box.
- 📸 Wide formats support - Canvacord supports many image formats such as png, jpeg, webp, gif, svg, etc.
- 📄 Wide range of templates - Canvacord provides many built-in templates to generate images such as triggered gif, beautiful image, facepalm image, etc. to quickly generate that meme you saw on reddit 🤡. No need to touch complicated canvas api, just a simple schema object is enough.
Installation
$ npm install canvacordCanvacord stays away from node-gyp based dependencies, so you don't have to worry about weird errors while installing the library. Although canvacord utilizes @napi-rs/canvas under the hood, it is recommended to use the builder api for image generation. Only utilize the canvas api if you need to perform image manipulation.
Documentation
Discord support server
https://neplextech.com/discord
What's Changed
- feat!: canvacord next by @twlite in #171
- fix(JSX): monkey patch layout issues by @twlite in #172
- chore(deps): bump @napi-rs/image from 1.6.1 to 1.7.0 by @dependabot in #173
- Feat: Added missing templates: Jail, Bed and Colorfy by @carefreeav09 in #174
- feat: added missing factory methods by @Rizina in #175
- feat: added missing factory methods missing in rewrite by @FroostyCodes in #176
- feat: added new factory method by @FroostyCodes in #177
- refactor(loadImage): use stream/consumers by @twlite in #179
- refactor: update assets factory by @twlite in #180
- feat: leaderboard card builder by @twlite in #181
- Release 6.0.0-beta.0 by @twlite in #182
- chore: add jsdoc comments and update readme by @twlite in #183
- chore: monorepo setup by @twlite in #187
- feat: docs outline by @twlite in #188
- feat: v6 docs by @twlite in #189
- fix: render new types by @twlite in #190
- chore: update FUNDING.yml by @twlite in #193
New Contributors
- @dependabot made their first contribution in #173
- @carefreeav09 made their first contribution in #174
- @Rizina made their first contribution in #175
- @FroostyCodes made their first contribution in #176
Full Changelog: v5.4.10...v6.0.0
v6.0.0-beta.0
6.0.0-beta.0 (Experimental Release)
Documentation is a WIP.
New Image generation API (Partial)
import { canvacord } from 'canvacord';
// old image-generation methods
const triggered = await canvacord.triggered(img);
const trash = await canvacord.trash(img);
// image filterer methods (filters can be chained together)
// with 500x500 canvas size
const filtered = await canvacord.filters(500, 500).drawImage(img).hueRotate(70).encode();
// auto size detection
const filtered = await canvacord(img).hueRotate(70).encode();Builders (Partial)
RankCardBuilder
import { RankCardBuilder } from 'canvacord';
const card = new RankCardBuilder()
.setUsername('wumpus')
.setDisplayName('Wumpus')
.setDiscriminator('1234')
.setAvatar('https://cdn.discordapp.com/embed/avatars/0.png?size=256')
.setCurrentXP(300)
.setRequiredXP(600)
.setLevel(2)
.setRank(5)
.setStatus('online');
const image = await card.build({ format: 'png' }); // 'svg' generates svg image (best quality compared to other formats)Leaderboard builder (prototype)
Builder API
Builder API allows you to create custom designs using react-like syntax and tailwindcss. You can use transpilers like babel or typescript to transpile jsx code.
import { JSX, Builder, Font } from 'canvacord';
interface Props {
text: string;
}
class Design extends Builder<Props> {
constructor() {
// set width and height
super(500, 500);
// initialize props
this.bootstrap({ text: '' });
}
setText(text: string) {
this.options.set('text', text);
return this;
}
// this is where you have to define output ui
async render() {
return (
<div className="flex items-center justify-center h-full w-full bg-teal-500">
<h1 className="text-white font-bold text-7xl">{this.options.get('text')}</h1>
</div>
);
}
}
// usage
// load default font
Font.loadDefault();
// create design
const design = new Design().setText('Hello World');
const image = await design.build({ format: 'png' });
// do something with generated imageOutput
For more info, join our discord server: https://neplextech.com/discord
v5.4.10
v5.4.9
What's Changed
- Add conditional discriminator rendering by @skdhg
- Create PULL_REQUEST_TEMPLATE.md by @slim-codes in #142
- [FEATURE] show specific progress from one level to the next by @Mittelblut9 in #151
- Add invisible type to Rank Card by @Damien111 in #149
- Fix: Failed to convert JavaScript value
Undefinedinto rust typeStringby @21Z in #154
Possible Discriminator Styles
New Contributors
- @slim-codes made their first contribution in #142
- @Mittelblut9 made their first contribution in #151
- @Damien111 made their first contribution in #149
- @21Z made their first contribution in #154
Full Changelog: v5.4.8...v5.4.9
v5.4.8
v5.4.7
Updates
- Bump
@napi-rs/canvas - Use
Intlformatter if available (module:abbrev)
Full Changelog: v5.4.6...v5.4.7
v5.4.6
Assets
- bundle NotoColorEmoji font
Canvacord
- apply noto color emoji font
- fix typings
Full Changelog: v5.4.5...v5.4.6