如何在 HTML 应用程序中集成 Shutterstock 图像编辑器？答案

【问题标题】：How to Integrate Shutterstock Image Editor in HTML app?如何在 HTML 应用程序中集成 Shutterstock 图像编辑器？
【发布时间】：2018-08-14 09:51:41
【问题描述】：

我想将 Shutterstock 图片编辑器集成到我的简单 HTML 应用程序中。所以我在 Shutterstock 中创建了一个开发者帐户并创建了我的 API 密钥。以下是我的 API：

现在我在我的 HTML 中使用上述 API 密钥（消费者密钥），如 here 所述。下面是我的 HTML 文件代码：

<!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>

运行我上面的 HTML 页面编辑器后没有呈现。下面是我的控制台日志显示：

加载资源失败：服务器响应状态为 403 (Forbidden)

下面的屏幕正在显示。

我还访问了Fiddle 以将编辑器集成到 HTML 中，但此 API 使用的是 JSFiddle 客户端。我的问题是如何在我的 HTML 应用程序中实现 Shutterstock 照片编辑器。请让我知道我在上面的代码中做错了什么。

【问题讨论】：

通常 403 错误就像是授权的事情。您无权访问 Shutterstock 的 API。您的 API 密钥可能有问题？
@CarstenFlokstra 我不知道我的 API 密钥有什么问题。在小提琴示例中，他们提供没有 - 密钥，在我的 API 密钥中，他们提供了我的 - 密钥。
你应该从你的图片中删除你的消费者秘密——这是一个应该保密的 ID，

标签： javascript html shutterstock

【解决方案1】：

您需要联系 api [at] shutterstock.com 才能访问编辑器 - 他们需要手动启用您的 api 密钥。

【讨论】：