{"id":22490138,"url":"https://github.com/Matb85/PhotoEditor","last_synced_at":"2025-08-02T22:32:19.726Z","repository":{"id":143759675,"uuid":"320628637","full_name":"Matb85/PhotoEditor","owner":"Matb85","description":"a Photo Editor created with Vue, Element Plus and Cropperjs","archived":false,"fork":false,"pushed_at":"2024-06-04T11:45:35.000Z","size":7955,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-11-29T05:12:06.744Z","etag":null,"topics":["element-plus","element-ui","javascript","typescript","vite","vitejs","vue","vue3","vue3-typescript","vuejs"],"latest_commit_sha":null,"homepage":"https://matb85.github.io/PhotoEditor/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Matb85.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-12-11T16:37:07.000Z","updated_at":"2024-10-08T07:41:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"32338b8c-28ea-4b52-8c3a-ae7accfcf550","html_url":"https://github.com/Matb85/PhotoEditor","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matb85%2FPhotoEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matb85%2FPhotoEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matb85%2FPhotoEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matb85%2FPhotoEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matb85","download_url":"https://codeload.github.com/Matb85/PhotoEditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500851,"owners_count":17930144,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-plus","element-ui","javascript","typescript","vite","vitejs","vue","vue3","vue3-typescript","vuejs"],"created_at":"2024-12-06T17:21:50.819Z","updated_at":"2024-12-06T17:24:22.433Z","avatar_url":"https://github.com/Matb85.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Photo Editor\n\n## A fully functional free online Photo Editor (works only in Chromium browsers for now)\n\n## A working example: https://matb85.github.io/PhotoEditor/\n\n![ScreenShot](/screenshot.png)\n\n### What's that?\n\nPhotoEditor is a Vue SPA utilizing [Element Plus](https://element-plus.org/), canvas filters and [Cropperjs](https://github.com/fengyuanchen/cropperjs).\nYou can install the core components via npm and use it in your own project.\n\n### Usage - Spa\n\nGo to https://matb85.github.io/PhotoEditor/, upload a photo and start tweaking the sliders! Currently, there are 3 basic editing options:\n\n- 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)\n- applying instagram filters thanks to [Instagram.css](https://githubcom/picturepan2/instagram.css)\n- cropping and rotating thanks to [Cropperjs](https://github.comfengyuanchen/cropperjs)\n\n### Usage - Api\n\n#### Download and import PhotoEditor\n\nOf course you can download the editor via npm as an esm module. Please remember that PhotoEditor requires Vuex!\n\n```bash\nnpm i @matb85/photoeditor\npnpm add @matb85/photoeditor\nyarn add @matb85/photoeditor\n```\n\n- in a no ssr environment (e.g. Vue spa):\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cPhotoEditor /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import '@matb85/photoeditor/dist/photo-editor.css';\n  import PhotoEditor from '@matb85/photoeditor';\n\u003c/script\u003e\n```\n\n- in a ssr environment (e.g. Nuxt universal app):\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cclient-only placeholder=\"Loading...\"\u003e\n      \u003cphotoEditor /\u003e\n    \u003c/client-only\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import '@matb85/photoeditor/dist/photo-editor.css'\n  export default {\n    name: 'your component',\n    components:\n      PhotoEditor: () =\u003e {\n      return import('@matb85/photoeditor').PhotoEditor\n        });\n      },\n    },\n  };\n\u003c/script\u003e\n```\n\n#### specification\n\n#### props\n\n- clearDataOnDestroy - if true, photoEditor's data in vuex and sessionStorage is cleared when the beforeDestroy hook is called\n\n```html\n\u003cphotoEditor clearDataOnDestroy /\u003e\n```\n\n#### events\n\nyou can emit to your photoEditor using this.$root.$emit(\"photoEditor/event\", arguments)\n\n- alterphoto - tells the photoEditor to update the photo (apply css filters)\n\n```javascript\nwindow.dispatchEvent(new CustomEvent('photoEditor/alterphoto')); // no arguments\n```\n\n- cropperchange - calls a cropperjs method (works only when cropperjs is available)\n\n```javascript\nnew CustomEvent('photoEditor/cropperchange', detail('cropperjsmethod', [array with arguments]));\nnew CustomEvent('photoEditor/cropperchange', detail('rotateTo', [20])); //rotates the image to 20 degrees\n```\n\n#### Vuex - actions\n\n- updatesettings - changes value of one css filter, in order to see the result call the alterphoto event\n\n```javascript\nthis.$store.dispatch('photoEditor/updatesettings', { func: cssfiltername, val: value });\n```\n\n#### Vuex - mutations\n\n- resetStore - reset the vuex module to its initial state and clear sessionStorage\n\n```javascript\nstore.commit('photoEditor/resetStore');\n```\n\n### Cotributing\n\nCertainly, contributions are welcome. So if you'd like to addfunctionality or simply make it better, go ahead, PRs welcome !:fire::fire::fire:\n\n### Project setup\n\n```\npnpm install\n```\n\n### Compiles and hot-reloads for development\n\n```\npnpm run dev\n```\n\n### Compiles the example app for production\n\n```\npnpm run build\n```\n\n### Compiles and minifies the library for production\n\n```\npnpm run build:lib\n```\n\n### Lints and fixes files\n\n```\npnpm run lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMatb85%2FPhotoEditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMatb85%2FPhotoEditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMatb85%2FPhotoEditor/lists"}