Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matb85/photoeditor
a Photo Editor created with Vue, Element Plus and Cropperjs
https://github.com/matb85/photoeditor
element-plus element-ui javascript typescript vite vitejs vue vue3 vue3-typescript vuejs
Last synced: about 2 months ago
JSON representation
a Photo Editor created with Vue, Element Plus and Cropperjs
- Host: GitHub
- URL: https://github.com/matb85/photoeditor
- Owner: Matb85
- Created: 2020-12-11T16:37:07.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-04T11:45:35.000Z (7 months ago)
- Last Synced: 2024-11-15T03:13:00.826Z (about 2 months ago)
- Topics: element-plus, element-ui, javascript, typescript, vite, vitejs, vue, vue3, vue3-typescript, vuejs
- Language: Vue
- Homepage: https://matb85.github.io/PhotoEditor/
- Size: 7.59 MB
- Stars: 7
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Photo Editor
## A fully functional free online Photo Editor (works only in Chromium browsers for now)
## A working example: https://matb85.github.io/PhotoEditor/
### What's that?
PhotoEditor is a Vue SPA utilizing [Element Plus](https://element-plus.org/), canvas filters and [Cropperjs](https://github.com/fengyuanchen/cropperjs).
You can install the core components via npm and use it in your own project.
### Usage - Spa
Go to https://matb85.github.io/PhotoEditor/, upload a photo and start tweaking the sliders! Currently, there are 3 basic editing options:
- applying [canvas filters](https://developer.mozilla.org/en-US/docs/WebAPI/CanvasRenderingContext2D/filter) (same as css filters: brightness,saturation, hue rotate, contrast, grayscale, sepia, invert)
- applying instagram filters thanks to [Instagram.css](https://githubcom/picturepan2/instagram.css)
- cropping and rotating thanks to [Cropperjs](https://github.comfengyuanchen/cropperjs)
### Usage - Api
#### Download and import PhotoEditor
Of course you can download the editor via npm as an esm module. Please remember that PhotoEditor requires Vuex!
```bash
npm i @matb85/photoeditor
pnpm add @matb85/photoeditor
yarn add @matb85/photoeditor
```
- in a no ssr environment (e.g. Vue spa):
```html
import '@matb85/photoeditor/dist/photo-editor.css';
import PhotoEditor from '@matb85/photoeditor';
```
- in a ssr environment (e.g. Nuxt universal app):
```html
import '@matb85/photoeditor/dist/photo-editor.css'
export default {
name: 'your component',
components:
PhotoEditor: () => {
return import('@matb85/photoeditor').PhotoEditor
});
},
},
};
```
#### specification
#### props
- clearDataOnDestroy - if true, photoEditor's data in vuex and sessionStorage is cleared when the beforeDestroy hook is called
```html
```
#### events
you can emit to your photoEditor using this.$root.$emit("photoEditor/event", arguments)
- alterphoto - tells the photoEditor to update the photo (apply css filters)
```javascript
window.dispatchEvent(new CustomEvent('photoEditor/alterphoto')); // no arguments
```
- cropperchange - calls a cropperjs method (works only when cropperjs is available)
```javascript
new CustomEvent('photoEditor/cropperchange', detail('cropperjsmethod', [array with arguments]));
new CustomEvent('photoEditor/cropperchange', detail('rotateTo', [20])); //rotates the image to 20 degrees
```
#### Vuex - actions
- updatesettings - changes value of one css filter, in order to see the result call the alterphoto event
```javascript
this.$store.dispatch('photoEditor/updatesettings', { func: cssfiltername, val: value });
```
#### Vuex - mutations
- resetStore - reset the vuex module to its initial state and clear sessionStorage
```javascript
store.commit('photoEditor/resetStore');
```
### Cotributing
Certainly, contributions are welcome. So if you'd like to addfunctionality or simply make it better, go ahead, PRs welcome !:fire::fire::fire:
### Project setup
```
pnpm install
```
### Compiles and hot-reloads for development
```
pnpm run dev
```
### Compiles the example app for production
```
pnpm run build
```
### Compiles and minifies the library for production
```
pnpm run build:lib
```
### Lints and fixes files
```
pnpm run lint
```