從API請求獲取輸出（客戶端）

Question

注意：我對API，JSON，REST等沒有經驗。

我正在嘗試在我的網站中實現FilePreviews。 其目的是獲取任何文件類型的網址，並將其轉換為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，例如“拇指”：

<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屬性。

假設 ：我希望“結果”與您的問題中所述相同。 但是， 客戶端庫文檔指示您將獲得不同的結果，並且應具有如下的thumbnailUrl分配：

var thumbnailUrl = result.previewUrl;

因此，請嘗試一下。