Flickr API 照片搜索 - 如何获得更大的图像？答案

【问题标题】：Flickr API photo search - How to get larger images?Flickr API 照片搜索 - 如何获得更大的图像？
【发布时间】：2016-12-11 18:46:08
【问题描述】：

所以我正在使用 Flickr API 进行照片搜索并在页面上显示图像，但是似乎我得到的每张图像都是缩略图大小或分辨率极低；我做错了什么？

link

这是我的代码：

<html>  
<head>  
<title>Test App Project</title>  
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">   
<style type="text/css">  

    .searchArea
    {
        height: 25%;
    }

    .cover-container {
        height: 75%;
        width: 100%;
        white-space: nowrap;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .cover-item {
        display:block;
        /*
        margin-top: 8px;
        margin-bottom: 8px;
        */
        margin: 25% 35% 25% 35%;
        box-shadow: 2px 2px 4px #bbb;
        border-top-right-radius: 4px;
        width: auto;
        height: auto;
        vertical-align: bottom;
        background-position: top left;
        background-repeat: no-repeat;
        background-size: cover;
    }

</style>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
<script>  


$(document).ready(function(){  
    $('#button').click(function(){  

        //Clear previous images
        document.getElementById("results").innerHTML = "";

        var search_val = document.getElementById("search_field").value; 

        var apiurl_search = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=REDACTED&tags="+ search_val +"&safe_search=3";
        var src;

        $.getJSON(apiurl_search + "&format=json&jsoncallback=?",function(data){
            $.each(data.photos.photo,function(i,myresult){

                src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_m.jpg";

                $("<img class='cover-item' />").attr("src", src).appendTo("#results");

                if (i == 24) return false;
            });  
        });  
    });  
}); 

</script>  
</head>  
<body>  
<div class="container">  
    <div class="row searchArea">  
        <div class="col-md-4"></div>
        <div class="col-md-4">  
            <div class="row">
                <div class="col-md-12">
                    <h2>Test App Project</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <label for="search_field">Search: </label>
                    <input id="search_field" type="text">
                </div>
                <div class="col-md-1"></div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <button type="button" class="btn btn-success" id="button">Fetch Recent Photos</button>  
                </div>
                <div class="col-md-2"></div>
            </div>
            <hr>  
        </div>  
        <div class="col-md-4"></div>
    </div>  

    <div class="row-fluid">  
        <div class="col-lg-12 col-md-10">
            <div id="results" class="cover-container">
            </div>
        </div>  
    </div>  
</div>  
</body>  
</html>

【问题讨论】：

标签： html twitter-bootstrap photos flickr image-size

【解决方案1】：

据我所知，您返回的是 Small 的大小，因为您的图像名称末尾有“_m”。尝试用“_c”替换“_m”，它应该会给你一个 800x800 的大小。

您可能希望为每个图像 ID 调用“flickr.photos.getSizes”以检查大小是否可用。您可以在此处查看示例响应 - https://www.flickr.com/services/api/flickr.photos.getSizes.html

因此，在上面的代码中，您可能希望通过替换来测试...

src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_m.jpg";

与..

src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_c.jpg";

如果上述方法有效，我会检查所有图片，如果有些图片未返回，您可能需要在指定尺寸之前调用尺寸以查找可用尺寸。

【讨论】：

这行得通！我非常关注 API 函数，甚至没有考虑我创建实际图像的方式。谢谢！！！！！！