從網絡獲取圖片的幾種方法

通過API獲取網絡的圖片下載,這裏以天行數據爲例,做簡要實驗。

數據獲取地址:網站地址(key請在個人中心獲取,需註冊,然後在個人中心複製,替換APIKEY即可)

1. Python方法

import requests
import json


def main():
    # request / response
    resp = requests.get('http://api.tianapi.com/meinv/?key=自己的KEY&num=10')
    mydict = json.loads(resp.text)
    for tempdict in mydict['newslist']: 
    # 這裏的newslist要根據不同api中的名字做相應調整,此次天行的爲newslist.
        pic_url = tempdict['picUrl']
        resp = requests.get(pic_url)
        filename = pic_url[pic_url.rfind('/') + 1:]
        try:
            with open(filename, 'wb') as fs:
                fs.write(resp.content)
        except IOError as e:
            print(e)


if __name__ == '__main__':
    main()

  • 2. JavaScript(html)原生方法
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!--div---加載的美女圖片存放的地方-->
        <div id="photos">

        </div> 
        <button id="load">加載</button> <!--加載數據按鈕-->
        <!--用原生JS寫   先給按鈕綁定事件-->
        <script type="text/javascript">
            //即時調用函數(function(){}()) 或者+(function(){})
            (function(){
                //通過ID拿,然後綁定事件,這裏不考慮瀏覽器兼容性問題
                var btn = document.getElementById('load'); 
                btn.addEventListener('click', function(){
                    //異步請求對象,偷偷的給服務器發送請求對象,這裏暫時也不考慮瀏覽器兼容性問題
                    var xhr = new XMLHttpRequest();
                    //JS默認只能從自己的服務器取數據, 同源策略
                    //但是今天的絕大多數都提供數據接口的服務器都設置了運行跨域取數據
                    //瀏覽器中支持2種協議 方式 get--拿數據,資源; post---提交  http協議
                    //url-統一資源定位符,就是一個地址 uniform resouce locator
                    //第一個參數get/第二個參數url/第三個參數true--表示異步請求
                    xhr.open('get', 
                        'http://api.tianapi.com/meinv/?key=自己的KEY&num=10', true);
                    //事件回調 onreadystatechange-就緒狀態改變
                    xhr.onreadystatechange = function(){
                        //判斷服務器響應是否完成,如果readyState==4,表示成功;服務器響應完成 正在傳爲2, 剛剛連上,還未傳數據爲1
                        //status表示狀態,爲200時,表示連接成功 服務器正常
                        if (xhr.readyState == 4){
                            //通過從服務器獲取的數據,對頁面進行DOM操作實現局部刷新
                            if (xhr.status == 200){
                                //字符串解析
                                var obj = JSON.parse(xhr.responseText);
                                var mmArray = obj.newslist;
                                var div = document.getElementById('photos')
                                for (var i = 0; i < mmArray.length; i += 1){
                                    var picUrl = mmArray[i].picUrl;
                                    var img = document.createElement('img');
                                    img.src = picUrl;
                                    img.width = '360';
                                    div.appendChild(img);
                                }
                            }
                        }
                    }
                    //發出請求
                    xhr.send()      
                })
            }());
        </script>
    </body>
</html>

  • 3. .get.JSON方法
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="photos"></div>
        <button id="load">加載</button>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var url = 'http://api.tianapi.com/meinv/?key=自己的KEY&num=10'
                $('#load').on('click', function(){
                    $.getJSON(url, function(obj){
                        var mmArray = obj.newslist;
                        for (var i = 0; i < mmArray.length; i += 1){
                            var img = $('<img>').attr('src', mmArray[i].picUrl).width(300);
                            $('#load').append(img);
                        }
                    })
                })
            })
        </script>
    </body>
</html>

  • 4. .ajax方法
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="photos"></div>
        <button id="load">加載</button>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var urlStr = 'http://api.tianapi.com/meinv/?key=自己的KEY&num=10'
                $('#load').on('click', function(){
                    $.ajax({
                        url: urlStr,
                        type:'get',
                        dateType:'json',
                        success:function(obj){
                            var mmArray = obj.newslist;
                            for (var i = 0; i < mmArray.length; i += 1){
                                var img = $('<img>').attr('src', mmArray[i].picUrl).width(300);
                                $('#load').append(img);
                            }
                        }   
                    })
                })
            })
        </script>
    </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章