Getting Started - Parcel JS
Let’s get started!
We will be using parcel-js for simplicity.
Create a project
- Start a new project in an empty directory by running
npm init
. - A
package.json
file will be created, with minimal information about the project.
Installing peer dependencies
PhotoEditor SDK needs following peer dependencies:
- React >= 16.8.6
- React DOM >= 16.8.6
- Styled Components >= 4.4
- Run
npm install --save react react-dom styled-components
to include them in the project.
Installing PhotoEditor SDK
- Run
npm install --save photoeditorsdk
. - Create a
dist
folder. - Copy the
assets
folder fromnode_modules/photoeditorsdk
todist
.
Adding a container for PhotoEditor SDK
- Create a
index.html
in the root of the project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body></body>
</html>
- Create a
<div>
tag as a container for the editor. The editor will adapt its size according to the dimensions of the container. For the sake of simplicity, specify the dimensions using inline styles.
<body>
+ <div role="PhotoEditor SDK" id="editor" style="width: 100vw; height: 100vh;"></div>
</body>
Initialize the editor
- Finally, in order to initialize the editor, instantiate the UI using JavaScript. Create a
index.js
in the root of the project.
import { UIEvent, PhotoEditorSDKUI } from "photoeditorsdk";
PhotoEditorSDKUI.init({
container: "#editor",
image: "example.png", // Image url or Image path relative to assets directory
license: "<your_license_key>",
}).then((editor) => {
console.log("PhotoEditorSDK for Web is ready!");
editor.on(UIEvent.CLOSE, () => {
console.log("closed");
});
});
- Include the
index.js
script in our html file
<body>
<div role="PhotoEditor SDK" id="editor" style="width: 100vw; height: 100vh;"></div>
+ <script src="./index.js"></script>
</body>
CORS
If you are loading images from external sources (e.g. from an AWS bucket), you need to first configure Cross-Origin Resource Sharing for both the server and the image.Otherwise, you will see errors such as
Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at [...] may not be loaded.
or
Unable to get image data from canvas because the canvas has been tainted.
Please follow the instructions on how to properly configure CORS here.
Ready to go!
This is all that is necessary to get PhotoEditor SDK up and running. Now all you have to do is launch a webserver.
- Run
npx parcel index.html
. - Then open
http://localhost:1234/
to see yout app.
Note: (npx comes with npm 5.2+ and higher, see instructions for older npm versions)
There you have it. PhotoEditor SDK for the Web is ready to use. Refer to the configuration documentaion for more configuration options.