如何在 HTML 应用程序中集成 Shutterstock 图像编辑器？
Posted
技术标签:
【中文标题】如何在 HTML 应用程序中集成 Shutterstock 图像编辑器？【英文标题】：How to Integrate Shutterstock Image Editor in HTML app? 【发布时间】：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，
【参考方案1】：
您需要联系 api [at] shutterstock.com 才能访问编辑器 - 他们需要手动启用您的 api 密钥。
【讨论】：
以上是关于如何在 HTML 应用程序中集成 Shutterstock 图像编辑器？的主要内容，如果未能解决你的问题，请参考以下文章