从API请求(客户端）获取输出 - Getting the output from an API request (client-side)

Getting the output from an API request (client-side)

本文关键字：获取输出客户端 API 请求 | 更新日期: 2023-09-27

注意：我对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修复程序来解决它

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

我没有使用FilePreviews的经验，但我认为它应该是这样工作的。

首先，您在HTML中添加一个图像标记，位于您希望缩略图出现的位置。给它一个id，例如"thumb"：

<img id="thumb"/>

然后，按如下方式修改脚本的最后一行：

previews.generate(url, options, onPreviewReceived);

第三个参数是回调函数，我们必须在脚本的其他地方定义它。我把它叫做PreviewReceived，但你可以选择自己的名字。当收到结果时调用它。您可以如下定义回调函数：

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

此函数将从结果中获得的url分配给img标记的src属性。

假设：我希望"结果"如您的问题所述。然而，客户端库文档表明，您将得到不同的结果，并且您应该有一个类似于以下的thumbnailUrl分配：

var thumbnailUrl = result.previewUrl;

所以也请试试。