Question

我想在我的简单HTML应用程序中集成Shutterstock Image Editor。因此，我在Shutterstock中创建了一个开发人员帐户并创建了我的API密钥。以下是我的API：

现在我在HTML中使用上面的API Key（Consumer Key）作为描述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（禁止）

以及屏幕下方显示。

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

Answer 1

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

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

1 个答案: