从API请求获取输出（客户端）

Question

Note: I am inexperienced with APIs, JSON, REST, etc.

I am trying to implement FilePreviews into my site. Its purpose is to take the url for any file type and convert it into a JPG or 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);

The request is received by the developer's app. The following results are shown in the site dashboard of the developer's app:

{
    "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"
    }
}

My question is: How do I get the url for the file preview into my site? Each file is referenced dynamically and there will be many on a page for most areas of my site. There seems to be no consistency in how FilePreviews is generating the folder on AWS S3, so I can't even use a clever PHP fix to solve it.

Anyone care to assist and show me the ways of this programming world?

Answer 1

I don't have experience with FilePreviews, but this is how I expect it should work.

First, you add an image tag in your HTML, at the spot where you want the thumbnail to appear. Give it an id, for example "thumb":

<img id="thumb"/>

Then, modify the last line of your script as follows:

previews.generate(url, options, onPreviewReceived);

The third parameter is a callback function we must define elsewhere in the script. I have called it onPreviewReceived, but you can choose your own name. It is called when the result is received. You can define the callback function as follows:

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

This function assigns the url, obtained from the result, to the src attribute of the img tag.

Assumption : I expect the 'result' to be as described in your question. However, the client library documentation indicates that you will get a different result and that you should have a thumbnailUrl assignment like this:

var thumbnailUrl = result.previewUrl;

So please try that as well.