0

I want to integrate Shutterstock Image Editor in my simple HTML app. So I make a developer account in Shutterstock and create my API Key. Below is my API:

enter image description here

Now I am using above API Key (Consumer Key) in my HTML as describe here. Below is my HTML file code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

</head>
<body>


    <script src="https://s.picdn.net/editor/image/assets/integration.js"></script>
    <script>
    window.editorInstance = window.Editor({
        apiKey: 'e1818-c5e61-74ce1-7ee31-6c7f8-7fb6d',
        language: 'en',
        image: 'https://www2.shutterstock.com/blog/wp-content/uploads/sites/5/2015/05/volcano-header-1440x960.jpg',
        excludeFeatures: ['filters'],
        initialPanel: 'text',
        logo: true,
        logoUrl: 'https://www2.shutterstock.com/base/public/images/logos/logo-shutterstock-de64a370ef.png',
        primaryActionText: 'Save and close',
        container: document.querySelector('#editor'),
        canvas: {
            height: 500,
            width: 500,
            fill: 'rgb(62, 69, 79)'
        },
        presets: [{
            name: 'Icon',
            height: 128,
            width: 128
        }, {
            name: 'Book Cover',
            height: 1600,
            width: 2400
        }],
        onPrimaryAction: function() {
            window.editorInstance.getBase64({
                format: 'jpg',
                quality: .91
            }).then(function(base64) {
                // Handle base64 image data
                window.editorInstance.hide();
            });
        }
    });

    // Launch instance of Editor
    window.editorInstance.launch().then(function(editor) {
        // Actions
    }).catch(function(err) {
        // Handle error
    });
    </script>

After running my above HTML page Editor doesn't render. Below is my console log showing:

Failed to load resource: the server responded with a status of 403 (Forbidden)

and below screen is showing.

enter image description here

Also I visit Fiddle to integrate editor in HTML but this API is using JSFiddle Client. My question is how I implement Shutterstock photo editor in my HTML app. Please let me know what I'm doing wrong in my above code.

mitch
  • 427
  • 1
  • 4
  • 10
Ahmer Ali Ahsan
  • 5,636
  • 16
  • 44
  • 81
  • Normally a 403 error is like an authorization thing. You have no acces to the API of Shutterstock. Maybe something wrong with your API key? – Carsten Flokstra Mar 06 '18 at 14:35
  • @CarstenFlokstra I don't know whats wrong with my API key. In fiddle example they providing without `-` key and in my API key they provide my `-` key. – Ahmer Ali Ahsan Mar 07 '18 at 04:51
  • You should remove your Consumer Secret from your image-- that is an ID that should kept private, – CaptEmulation Mar 07 '18 at 14:59

1 Answers1

1

You need to contact api [at] shutterstock.com in order to access the Editor - they'll need to manually enable your api key for it.

Jacob Emerick
  • 56
  • 1