Hi Web developers! We’re happy to announce a new sample repo that demonstrates how to use the Creative SDK Image Editor with High Resolution image editing.
This repo joins our standard resolution sample repos for jQuery and for Angular/Express.
The Creative SDK Image Editor UI component for Web offers standard resolution image editing out of the box, with no additional permissions required.
For High Resolution image editing, there are a couple of extra steps involved:
Approval is required from the Creative SDK team
For more information about getting approval, see the High Resolution image editing guide
Setup for High Resolution is required in your code
For that second step, our new Angular/Express with High Resolution sample repo will be helpful when viewed in conjunction with our High Resolution image editing guide.
Points to check
Have a look at the code in our sample repo to see one way to set up High Resolution image editing.
In this repo, the client-side code hits our server’s Creative SDK authentication endpoint. The client knows what endpoint to hit because we have provided the following key/value pair to our
Aviary.Feather() configuration object:
Also note that for High Resolution, we use the
onSaveHiRes property in the
Aviary.Feather() configuration object. What you do in this function is completely up to your app’s needs.
Lastly, note that in our
$scope.imageEditor.launch() call, we pass both
hiresUrl key/value pairs in our configuration object. These can point to the same place, but both key/value pairs must be present.
For sample code, see:
On the server, we have created an API endpoint at
/api/auth/creativesdkAuthObj. The location of this endpoint is arbitrary, but the object it returns is crucial for High Resolution editing.
This endpoint returns the value of
getAuthObj() is a helper method we created to set up our authentication object. The Creative SDK uses this object to authenticate the client for High Resolution image editing.
Ulitimately, the authentication object returned from the
/api/auth/creativesdkAuthObj endpoint looks like this:
Everything in angle brackets (
< >) above should be replaced with real values, as we do in our sample repo.
For sample code, see:
Be sure to follow the steps in the
readme to get set up.
You will need Nodejs and NPM installed to run the app.
Not a web developer? We offer Getting Started sample repos for mobile platforms as well. Have a look at our sample repos for iOS and for Android on GitHub.