vue-pesdk
PhotoEditor SDK Vue.js wrapper
🏷
Note
PhotoEditor SDK is a product of img.ly GmbH. In order to use PhotoEditor SDK inside one of your products, you will need a valid a license.
🔧
Installation
yarn add vue-pesdk photoeditorsdk react react-dom styled-components
or
npm i -D vue-pesdk photoeditorsdk react react-dom styled-components
react, react-dom and styled-components are peerDependencies and are needed to render the PhotoEditorSDK UI. In addition you need the PhotoEditor SDK assets. You can either get them here or copy it from your node_modules into your public asset folder. And set the assetBaseUrl prop to this folder.
cp -r node_modules/photoeditorsdk/assets/ ~/projects/your-project/public/assets
If needed, take a look at the official documentation for further information.
👈
Usage
Import the PhotoEditor SDK css styles and the vue-sdk component.
<template>
<PhotoEditor
asset-path="/static"
license='{"owner": ...}'
image-path="/static/example.jpg"
/>
</template>
<script>
import PhotoEditor from 'vue-pesdk';
export default {
components: { PhotoEditor }
};
</script>
📒
Props
| prop | default | type | required | description |
|---|---|---|---|---|
| layout | 'advanced' | String | no | Select if you want to use the Advanced or Basic UI. Supported values are advanced and basic. |
| theme | 'dark' | String | no | Select if you want to use the Dark or Light Theme. Supported values are dark and light. |
| license | '' | String | yes | Your PhotoEditorSDK license. Get it here |
| imagePath | '' | String | yes | Path to the image that will be rendered initially |
| assetPath | 'assets' | String | yes | Path to your assets. Where the PhotoEditorSDK assets are stored |
| options | Object | no |
🛫
Getting Started
The idea behind this wrapper is to simplify the usage of the PhotoEditor SDK inside Vue. We try to minimize the configuration and maximize the possibilities. Because of that you have only 3 important and required props, license, imagePath and assetPath to get the editor running.
However, you have to either download or copy the PhotoEditor SDK assets to your public asset folder. You can either get them here or copy them from your node_modules.
If you need more configuration possibilities, you can pass all the mentioned options to the options prop.
Furthermore, the editor instance is saved as a Vue Instance Property so you can access the editor instance inside your parent component with this.$pesdk after the editor is mounted.
📺
Examples
Basic Example
<template>
<PhotoEditor
:license="$options.license",
asset-path="/assets"
image-path="/assets/example.jpg"
/>
</template>
<script>
import PhotoEditor from 'vue-pesdk'
import PesdkLicense from './myLicense.json'
export default {
components: { PhotoEditor },
license: JSON.stringify(PesdkLicense)
}
Listen to Events
You can listen to various events in the PhotoEditorSdk You can simply attach an .on() event to the editor instance.
<template>
<PhotoEditor
:license="$options.license"
asset-path="/assets"
image-path="/assets/example.jpg"
/>
</template>
<script>
import PhotoEditor from 'vue-pesdk'
import PesdkLicense from './myLicense.json'
export default {
components: { PhotoEditor },
license: JSON.stringify(PesdkLicense), // This is optional way to store non-reactive data in vue.
mounted () {
this.$pesdk.on('export', (result) => {
console.log('User clicked export, resulting image / dataurl:')
console.log(result)
})
}
}
Specifying which focus modes are available
Like mentioned earlier you can pass in all configuration options like here.
<template>
<PhotoEditor
asset-path="/assets"
:license="$options.license"
:options="options"
image-path="/assets/example.jpg"
/>
</template>
<script>
import PhotoEditor from 'vue-pesdk'
import PesdkLicense from './myLicense.json'
export default {
components: { PhotoEditor },
license: JSON.strigify(PesdkLicense), // This is optional.
data: () => ({
options: {
controlsOptions: {
focus: {
availableModes: ['radial', 'mirrored', 'linear', 'gaussian']
}
}
}
})
}
📜
Changelog
Details changes for each release are documented in the CHANGELOG.md.
👨💻
Development
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
📜
License
Please see LICENSE for licensing details.
👥
Authors and Contributors
Please see CONTRIBUTORS for licensing details.
💬
Support or Contact
For support requests, please use our Support Desk.
382 Dec 30, 2022
583 Jan 9, 2023
149 Nov 25, 2022
96 Dec 14, 2022
63 Sep 12, 2022
2 Jun 3, 2021
63 Jan 8, 2023
8.7k Jan 4, 2023
61 Dec 29, 2022
2 Jan 23, 2021
3 Oct 18, 2022
3 Jul 30, 2020
24 Apr 27, 2022
164 Dec 28, 2022
194 Aug 2, 2022
0 Dec 8, 2020
155 Dec 30, 2022
174 Dec 14, 2022
25 Dec 5, 2020
18 Jul 30, 2020