javascript - How to get the cropped image from Instagram API? - Stack Overflow

admin管理员组

文章数量:1429818

Currently I get this image :

.2885-15/s320x320/e35/11950569_428157634035762_1539002513_n.jpg

but I would like to get this version of image :

.2885-15/e35/c238.0.603.603/11856567_458440314342209_1536381871_n.jpg

This is how I construct the API URL:

var apiEndpoint = "";

    function poseRequestURL() {

        var url = apiEndpoint,
            params = {};

        if (settings.next_url != null) {
            return settings.next_url;
        }

        if (settings.hash != null) {
            url += "/tags/" + settings.hash + "/media/recent";
        }
        else if (settings.search != null) {
            url += "/media/search";
            params.lat = settings.search.lat;
            params.lng = settings.search.lng;
            settings.search.max_timestamp != null && (params.max_timestamp = settings.search.max_timestamp);
            settings.search.min_timestamp != null && (params.min_timestamp = settings.search.min_timestamp);
            settings.search.distance != null && (params.distance = settings.search.distance);
        }
        else if (settings.userId != null) {
            url += "/users/" + settings.userId + "/media/recent";
        }
        else if (settings.locationId != null) {
            url += "/locations/" + settings.locationId + "/media/recent";
        }
        else {
            url += "/media/popular";
        }

        settings.accessToken != null && (params.access_token = settings.accessToken);
        settings.clientId != null && (params.client_id = settings.clientId);
        settings.minId != null && (params.min_id = settings.minId);
        settings.maxId != null && (params.max_id = settings.maxId);
        settings.show != null && (params.count = settings.show);

        url += "?" + $.param(params)

        return url;
    }

Are there any suggestion to get that cropped image? Thanks a lot.

Currently I get this image :

https://scontent.cdninstagram./hphotos-xtp1/t51.2885-15/s320x320/e35/11950569_428157634035762_1539002513_n.jpg

but I would like to get this version of image :

https://igcdn-photos-b-a.akamaihd/hphotos-ak-xfp1/t51.2885-15/e35/c238.0.603.603/11856567_458440314342209_1536381871_n.jpg

This is how I construct the API URL:

var apiEndpoint = "https://api.instagram./v1";

    function poseRequestURL() {

        var url = apiEndpoint,
            params = {};

        if (settings.next_url != null) {
            return settings.next_url;
        }

        if (settings.hash != null) {
            url += "/tags/" + settings.hash + "/media/recent";
        }
        else if (settings.search != null) {
            url += "/media/search";
            params.lat = settings.search.lat;
            params.lng = settings.search.lng;
            settings.search.max_timestamp != null && (params.max_timestamp = settings.search.max_timestamp);
            settings.search.min_timestamp != null && (params.min_timestamp = settings.search.min_timestamp);
            settings.search.distance != null && (params.distance = settings.search.distance);
        }
        else if (settings.userId != null) {
            url += "/users/" + settings.userId + "/media/recent";
        }
        else if (settings.locationId != null) {
            url += "/locations/" + settings.locationId + "/media/recent";
        }
        else {
            url += "/media/popular";
        }

        settings.accessToken != null && (params.access_token = settings.accessToken);
        settings.clientId != null && (params.client_id = settings.clientId);
        settings.minId != null && (params.min_id = settings.minId);
        settings.maxId != null && (params.max_id = settings.maxId);
        settings.show != null && (params.count = settings.show);

        url += "?" + $.param(params)

        return url;
    }

Are there any suggestion to get that cropped image? Thanks a lot.

• javascript
• jquery
• html
• image
• instagram

Share Improve this question Follow edited Nov 5, 2015 at 10:28 hjpotter92 80.7k3636 gold badges148148 silver badges187187 bronze badges asked Nov 5, 2015 at 9:44 user782104user782104 13.6k6060 gold badges178178 silver badges315315 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Yes, there are suggestion to get that cropped image.

All you need is to know original width and height of image.

You may add /cX.Y.W.H/ in url to crop image.

For example: original size of your image is 1080x603. So, to crop image in square we need get square 1080x1080 (with white spaces) and crop it to 603x603.

Answer is: W=603, H=603, X=(1080-603)/2=238, Y=(1080-603)/2=238.

Then add /c238.238.603.603/ to url:

https://scontent.cdninstagram./hphotos-xtp1/t51.2885-15/s320x320/e35/c238.238.603.603/11950569_428157634035762_1539002513_n.jpg

That image is 320x320, so to get our square just delete some variables, and get url:

https://scontent.cdninstagram./hphotos-xtp1/c238.238.603.603/11950569_428157634035762_1539002513_n.jpg

UPD

If you does not know real original size of an image, API returns size of non square image (to activate it: Manage Clients -> Edit -> Migrations tab -> Check Non square media).

Example:

Link:

https://api.instagram./v1/tags/nonsquare/media/recent?client_id=CLIENT-ID

From answer:

...
images: {
    low_resolution: {
        url: "https://scontent.cdninstagram./hphotos-xpt1/t51.2885-15/e35/p320x320/10949090_860171600771180_267418389_n.jpg",
        width: 320,
        height: 400
    },
    thumbnail: {
        url: "https://scontent.cdninstagram./hphotos-xpt1/t51.2885-15/s150x150/e35/c0.135.1080.1080/10949090_860171600771180_267418389_n.jpg",
        width: 150,
        height: 150
    },
    standard_resolution: {
        url: "https://scontent.cdninstagram./hphotos-xpt1/t51.2885-15/sh0.08/e35/p640x640/10949090_860171600771180_267418389_n.jpg",
        width: 640,
        height: 800
    }
}
...

In url we add /pWxH/ to get image by small size (for /p640x640/ and real original size 1080x1350 Instagram returns image 640x800). You could use this values (640x800) as original to get cropped image.

In this example:

API url:

https://scontent.cdninstagram./hphotos-xpt1/t51.2885-15/sh0.08/e35/p640x640/10949090_860171600771180_267418389_n.jpg

Original url:

https://scontent.cdninstagram./hphotos-xpt1/t51.2885-15/sh0.08/e35/10949090_860171600771180_267418389_n.jpg

Cropped (640x640) url:

https://scontent.cdninstagram./hphotos-xpt1/t51.2885-15/sh0.08/e35/p640x640/c0.80.640.640/10949090_860171600771180_267418389_n.jpg

Cropped (320x320 from 640x640) url:

https://scontent.cdninstagram./hphotos-xpt1/t51.2885-15/sh0.08/e35/p640x640/c160.240.320.320/10949090_860171600771180_267418389_n.jpg

Cropped (320x320) url:

https://scontent.cdninstagram./hphotos-xpt1/t51.2885-15/sh0.08/e35/p320x320/c0.40.320.320/10949090_860171600771180_267418389_n.jpg

本文标签： javascriptHow to get the cropped image from Instagram APIStack Overflow