Как использовать бесплатный API для загрузки изображений – imgur.com

Используя API, предоставляемый imgur.com, вы можете создать функцию, которая позволит вам бесплатно прикреплять изображения к вашему блогу или веб-сайту.

Зарегистрироваться

Если вы еще не зарегистрированы в качестве члена, сначала выполните регистрацию членства на следующем сайте.

Imgur: Магия Интернета

Нажмите кнопку «Зарегистрироваться» в правом верхнем углу.

Вы также можете легко зарегистрироваться в других социальных сетях. Я зарегистрируюсь со своей учетной записью Google.

Введите свое имя пользователя и номер мобильного телефона и нажмите кнопку «Продолжить».

Введите 7-значный номер, отправленный на ваш мобильный телефон, и нажмите кнопку «Регистрация».

Регистрация завершена немедленно, и вы будете перемещены на следующий экран.

Регистрация приложения

После завершения регистрации членства следующим шагом будет прохождение процесса регистрации приложения для загрузки изображений в нужную службу.

Выберите API, показанный в нижней части основного сайта imgur.com.

Затем вы увидите документацию Imgur API, например:

Если вы прокрутите немного вниз, вы увидите ссылку «Зарегистрировать ваше приложение», давайте выберем ее.

Если вы хотите перейти непосредственно к нему, просто нажмите на следующую ссылку.

Imgur — зарегистрируйте приложение

На следующем экране мы заполним необходимые поля. Введите соответствующее имя приложения и URL-адрес сайта, на котором вы работаете, в URL-адрес обратного вызова авторизации. Кажется, что вы можете ввести другой адрес, но я не уверен, почему. Вы также введете свой адрес электронной почты. И нажмите кнопку отправки.

Если вы вошли нормально, вы можете получить значения Client ID и Client secret следующим образом. Нам нужно значение Client ID. Не забудьте также записать значение секрета клиента, так как оно может понадобиться вам позже. Даже если вы забудете, вы можете создать новый и использовать его позже, если это необходимо.

Как загружать файлы

В этом легко убедиться на следующем примере. Введите значение Client ID, полученное при регистрации приложения, в часть xxxxxxxxxx.

<input type="file" id="upload_image">
<button onclick="uploadImageTest()">upload</button>
<script>
    function uploadImageTest() {
        var bodyData = new FormData();
        var imageFile = document.querySelector("#upload_image").files[0];
        bodyData.append("image", imageFile);
        fetch("https://api.imgur.com/3/image", {
            method: "POST",
            headers: {
                Authorization: "Client-ID xxxxxxxxxxxxxxx",
                Accept: "application/json",
            },
            body: bodyData,
        }).then(function(res){
            return res.json();
        }).then(function(json){
            console.log(json);
        });
    }
</script>

Если загрузка изображения прошла успешно, возвращается следующая информация. Следовательно, можно судить об успехе по значению успеха и отображать фактическое изображение через часть данных, связанную со ссылкой.

{
  "data": {
    "id": "orunSTu",
    "title": null,
    "description": null,
    "datetime": 1495556889,
    "type": "image/gif",
    "animated": false,
    "width": 1,
    "height": 1,
    "size": 42,
    "views": 0,
    "bandwidth": 0,
    "vote": null,
    "favorite": false,
    "nsfw": null,
    "section": null,
    "account_url": null,
    "account_id": 0,
    "is_ad": false,
    "in_most_viral": false,
    "tags": [],
    "ad_type": 0,
    "ad_url": "",
    "in_gallery": false,
    "deletehash": "x70po4w7BVvSUzZ",
    "name": "",
    "link": "http://i.imgur.com/orunSTu.gif"
  },
  "success": true,
  "status": 200
}

Надеюсь, что вы найдете ее полезной.