javascript - 获取 API 请求的输出(客户端)

Question

注意:我对 API、JSON、REST 等缺乏经验。

我正在尝试在我的网站中实现 FilePreviews。其目的是获取任何文件类型的 url 并将其转换为 JPG 或 PNG。

JavaScript

var previews = new FilePreviews({
  debug: true,
  apiKey: 'MY_API_KEY'
});

var url = 'http://i.imgur.com/HQB8wtI.jpg';

var options = {
  size: {
    width: 100,
    height: 999
  },
  metadata: ['exif', 'ocr', 'psd'],
  format: 'jpg'
};

previews.generate(url, options);

开发者的应用程序收到请求。以下结果显示在开发者应用程序的站点仪表板中:

{
    "preview": {
        "resized": true,
        "size": {
            "height": "178",
            "width": "100"
        },
        "page": 1,
        "url": "https://s3-us-west-2.amazonaws.com/[removed for privacy]/ec210ecf45d9d190539a241462c621f75adf2d4f835fb394a8d738d09fd412d6/HQB8wtI_100x999_1.jpg",
        "requested_size": "100x999",
        "original_size": {
            "height": "1024",
            "width": "576"
        }
    },
    "id": "25841aca-e176-4cf7-ac1d-b01ce604a765",
    "user_data": null,
    "status": "success",
    "url": "https://api.filepreviews.io/v2/previews/25841aca-e176-4cf7-ac1d-b01ce604a765/",
    "thumbnails": [
        {
            "resized": true,
            "size": {
                "height": "178",
                "width": "100"
            },
            "page": 1,
            "url": "https://s3-us-west-2.amazonaws.com/[removed for privacy]/ec210ecf45d9d190539a241462c621f75adf2d4f835fb394a8d738d09fd412d6/HQB8wtI_100x999_1.jpg",
            "requested_size": "100x999",
            "original_size": {
                "height": "1024",
                "width": "576"
            }
        }
    ],
    "original_file": {
        "metadata": {
            "ocr": null,
            "psd": null,
            "exif": null
        },
        "size": 82022,
        "extension": "jpg",
        "total_pages": 1,
        "encoding": "binary",
        "name": "HQB8wtI",
        "mimetype": "image/jpeg",
        "type": "image"
    }
}

我的问题是:如何将文件预览的 URL 获取到我的网站？每个文件都是动态引用的，并且我网站的大部分区域的页面上都会有很多文件。 FilePreviews 在 AWS S3 上生成文件夹的方式似乎没有一致性，因此我什至无法使用巧妙的 PHP 修复来解决它。

有人愿意协助并向我展示这个编程世界的方式吗？

Answer 1

我没有使用 FilePreviews 的经验，但这就是我期望它应该如何工作的方式。

首先，在 HTML 中要显示缩略图的位置添加图像标记。给它一个 id，例如“thumb”:

<img id="thumb"/>

然后，修改脚本的最后一行，如下所示:

previews.generate(url, options, onPreviewReceived);

第三个参数是我们必须在脚本中其他地方定义的回调函数。我将其称为 onPreviewReceived，但您可以选择自己的名称。当收到结果时调用它。您可以按如下方式定义回调函数:

function onPreviewReceived(err, result) {
    if (!err) {
        var thumbnailUrl = result.thumbnails[0].url;  // but see assumption
        document.getElementById("thumb").setAttribute("src", thumbnailUrl);
    }
}

该函数将从结果中获取的 url 分配给 img 标签的 src 属性。

假设:我希望“结果”如您的问题中所述。然而，the client library documentation表示您将得到不同的结果，并且您应该有一个像这样的thumbnailUrl 分配:

var thumbnailUrl = result.previewUrl;

所以请也尝试一下。