Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pikasojs/pikaso
Seamless, headless and fully tested HTML5 Canvas library
https://github.com/pikasojs/pikaso
canvas canvas-text-editor crop crop-image cropper fabric filter-images flip image image-editor javascript konvajs pencil react rotate-image shape svg
Last synced: 6 days ago
JSON representation
Seamless, headless and fully tested HTML5 Canvas library
- Host: GitHub
- URL: https://github.com/pikasojs/pikaso
- Owner: pikasojs
- License: mit
- Created: 2020-11-12T15:47:57.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-03T22:38:43.000Z (9 months ago)
- Last Synced: 2024-10-29T17:34:26.252Z (3 months ago)
- Topics: canvas, canvas-text-editor, crop, crop-image, cropper, fabric, filter-images, flip, image, image-editor, javascript, konvajs, pencil, react, rotate-image, shape, svg
- Language: TypeScript
- Homepage: https://pikaso.app
- Size: 3.5 MB
- Stars: 222
- Watchers: 8
- Forks: 18
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Pikaso
Seamless, Fully-typed and Fully-tested HTML5 Canvas Library
Learn more »
Website ·
API Documentation ·
Issues .
Discussion
[](https://www.codacy.com/gh/pikasojs/pikaso/dashboard)
[](https://www.codacy.com/gh/pikasojs/pikaso/dashboard)
## Install
#### NPM
Pikaso provides both ES module and CommonJS bundles, which is easy to use with the popular bundlers
```js
npm install pikaso --save
```
#### Yarn
```js
yarn add pikaso
```
#### tag
Pikaso also supports UMD loading
```js
<srcipt src="https://cdn.jsdelivr.net/npm/pikaso@latest/umd/pikaso.min.js" type="text/javascript" />
```
## Getting Started
```js
import Pikaso from 'pikaso'
const editor = new Pikaso({
container: document.getElementById('<YOUR_DIV_ID>'),
})
```
## React
This is possible to directly import the library or reuse the official hook
https://github.com/pikasojs/pikaso-react-hook
## NodeJs
Pikaso comes with support for NodeJs out of the box.
Using Pikaso in a NodeJs environment is similar to using it in a browser.
[https://pikaso.app/#/advanced/nodejs](https://pikaso.app/#/advanced/nodejs)
## Features
- [Fully Typed](https://github.com/pikasojs/pikaso/tree/master/src/types)
- [Global Configurations](https://pikaso.app/#/getting-started/configuration)
- [Fully Customizable Cropping](https://pikaso.app/#/core/cropper)
- [Rotation and Transformation](https://pikaso.app/#/core/rotation)
- [Shape and FreeStyle Drawing](https://pikaso.app/#/core/drawing)
- [Built-in Shapes](https://pikaso.app/#/core/shapes)
- [Groups](https://pikaso.app/#/core/groups)
- [Interactive Text Editing](https://pikaso.app/#/core/label)
- [Customizable Shapes](https://pikaso.app/#/advanced/create-custom-shapes)
- [Image and SVG](https://pikaso.app/#/core/image)
- [Background Image](https://pikaso.app/#/core/background)
- [Event Management](https://pikaso.app/#/core/events)
- [State Management (Undo/Redo)](https://pikaso.app/#/core/history)
- [Flipping ](https://pikaso.app/#/core/flip)
- [Interactive Selection Management](https://pikaso.app/#/core/selection)
- [Snap to Grid](https://pikaso.app/#/core/snap-grid)
- [Measurement Tag](https://pikaso.app/#/core/measurement-tag)
- [Export to PNG and JPEG](https://pikaso.app/#/core/import-export)
- [Import/Export JSON](https://pikaso.app/#/core/import-export)
- [Filters](https://pikaso.app/#/core/filters)
- [Custom Filters](https://pikaso.app/#/advanced/create-custom-filters)
- [NodeJs](https://pikaso.app/#/advanced/nodejs)
## Documentation
[Full Documentation](https://pikaso.app)
## API references
[Full API references](https://pikaso.app/api)
## Demos
[React Setup](https://codesandbox.io/s/pikaso-react-hook-example-i0uwg)
[Vue 3 Setup](https://codesandbox.io/s/vue3-example-o3cig)
[Svelte Setup](https://svelte.dev/repl/b3e372de4b404f67b70ce047623f0efc?version=3.46.4)
[All Demos](https://pikaso.app)
### Pikaso vs. Konva
[Konva](https://konvajs.org/docs/index.html) is a great HTML5 Canvas TypeScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Pikaso is built on top of Konva to provide a couple of advanced features that Konva doesn't support out of the box.
| Library | |
| - | - |
| HTML5 Canvas | Provides low level APIs to draw graphics |
| Konva | Provides Shapes, Dragging, Styling, Events, Transformation and Filters features to HTML5 canvas |
| Pikaso | Adds a lot of Simplicity and provides Free style and Shape Drawing, Advanced Shapes and Groups, State Management (Undo/Redo/Reset), JSON Import/Export, Text Editing, Cropping, Rotation, Transformation, Event Manager, Snap to Grid, Advanced Transformation and Selection, Flipping, Background Image and Background Overlay management, Filter Management to Konva |
## Supporters
[](https://github.com/pikasojs/pikaso/stargazers)
## License
According to the terms of the [MIT license](LICENSE), Pikaso is freely distributable.
[![FOSSA Status][fossa-large-image]][fossa-large-url]
[fossa-large-image]: https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fpikasojs%2Fpikaso.svg?type=large
[fossa-large-url]: https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fpikasojs%2Fpikaso?ref=badge_large