Web sample repo: Image Editor with High Resolution

Posted on Tuesday, May 10th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

High Resolution sample repo for the Creative SDK

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.

Contents

Background

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:

  1. Approval is required from the Creative SDK team

    For more information about getting approval, see the High Resolution image editing guide

  2. 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.

Client-side setup

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:

authenticationURL: "/api/auth/creativesdkAuthObj"

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 url and 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: /client/pre-build/home/home.controller.js

Server-side setup

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(), where 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:

{
    apiKey: <key>,
    salt: <salt>,
    timestamp: <timestamp>,
    encryptionMethod: <method>,
    signature: <signature>
}

Everything in angle brackets (< >) above should be replaced with real values, as we do in our sample repo.

For sample code, see: /server/api/auth/auth.controller.js

Getting started

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.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.