最近在用ESP32S3獲取B站JPG頭像進行顯示。記錄一下，開發板鏈接：

ESP32-S3 LVGL 開發板 人工智能語音識別 人臉識別 觸摸 音頻-淘寶網 (taobao.com)

直接上代碼：

第一種下載方式：

/*獲取B站頭像JPG文件buffer */ static esp_err_t face_http_event_handler(esp_http_client_event_t *evt) {static char *output_buffer; // Buffer to store response of http request from event handlerstatic int output_len; // Stores number of bytes readswitch (evt->event_id){case HTTP_EVENT_ERROR:ESP_LOGI(TAG, "HTTP_EVENT_ERROR");break;case HTTP_EVENT_ON_CONNECTED:ESP_LOGI(TAG, "HTTP_EVENT_ON_CONNECTED");break;case HTTP_EVENT_HEADER_SENT:ESP_LOGI(TAG, "HTTP_EVENT_HEADER_SENT");break;case HTTP_EVENT_ON_HEADER:ESP_LOGI(TAG, "HTTP_EVENT_ON_HEADER, key=%s, value=%s", evt->header_key, evt->header_value);break;case HTTP_EVENT_ON_DATA:printf("HTTP_EVENT_ON_DATA, len=%d\n", evt->data_len);//如果404或者502// if (evt->data_len == 150 || evt->data_len == 146)// return ESP_OK;// printf("%.*s\n", evt->data_len, (char *)evt->data);// if (!esp_http_client_is_chunked_response(evt->client)) {// // Write out data// printf("%.*s", evt->data_len, (char*)evt->data);// }if (!esp_http_client_is_chunked_response(evt->client)){//ESP_LOGI(TAG, "HTTP_EVENT_ON_DATA !esp_http_client_is_chunked_response");// If user_data buffer is configured, copy the response into the bufferif (face_buffer) /*如果已經申請了內存 就直接復制接收到的數據*/{memcpy(face_buffer + output_len, evt->data, evt->data_len);}else /*如果沒有申請*/{if (face_buffer == NULL) /*申請一個http長度的內存來保存數據*/{face_buffer = (char *)malloc(esp_http_client_get_content_length(evt->client));output_len = 0;if (face_buffer == NULL){ESP_LOGE(TAG, "Failed to allocate memory for output buffer");return ESP_FAIL;}}memcpy(face_buffer + output_len, evt->data, evt->data_len); //拷貝數據}output_len += evt->data_len; //記錄下載進度}break;case HTTP_EVENT_ON_FINISH:ESP_LOGI(TAG, "HTTP_EVENT_ON_FINISH");break;case HTTP_EVENT_DISCONNECTED:ESP_LOGI(TAG, "HTTP_EVENT_DISCONNECTED");break;}return ESP_OK; } void get_face_jpg(char *bili_uid) {static esp_http_client_config_t config = {.url = "https://whycan.com/files/members/4115/11111.png",//這里是你的B站頭像鏈接.event_handler = face_http_event_handler,.buffer_size = 3 * 1024,.timeout_ms = 4000,.path = "/get",.transport_type = HTTP_TRANSPORT_OVER_TCP,};esp_http_client_handle_t client = esp_http_client_init(&config);esp_http_client_set_header(client, "Accept", "*/*");esp_http_client_set_header(client, "Accept-Encoding", "identity");esp_http_client_set_header(client, "User-Agent", "PostmanRuntime/7.24.1");esp_http_client_set_header(client, "Connection", "keep-alive");esp_http_client_set_header(client, "Content-Type", "application/json");// esp_err_t err = esp_http_client_open(client, 0);esp_err_t err = esp_http_client_perform(client);if (err == ESP_OK){ESP_LOGE(TAG, "HTTP GET Status = %d, content_length = %d",esp_http_client_get_status_code(client),esp_http_client_get_content_length(client));}else{ESP_LOGE(TAG, "HTTP GET request failed: %s", esp_err_to_name(err));}esp_http_client_cleanup(client); }

以上方式是獲取一個固定鏈接的圖片存到face_buffer 這個char*里，下一種是先根據B站id來獲取頭像圖片的url，再根據url來獲取圖片。

B站個人信息API接口：https://api.bilibili.com/x/space/acc/info?mid=59041601

在瀏覽器里輸入以上鏈接可以看到：

{"code":0,"message":"0","ttl":1,"data":{"mid":59041601,"name":"Kevincoooool","sex":"男","face":"http://i2.hdslb.com/bfs/face/bce14f5e3af4bca480fc7de227986ba304507078.jpg","face_nft":0,"sign":"Jlink DAP OpenMV 淘寶店鋪:酷世DIY","rank":10000,"level":5,"jointime":0,"moral":0,"silence":0,"coins":1249,"fans_badge":true,"fans_medal":{"show":true,"wear":false,"medal":null},"official":{"role":0,"title":"","desc":"","type":-1},"vip":{"type":0,"status":0,"due_date":0,"vip_pay_type":0,"theme_type":0,"label":{"path":"","text":"","label_theme":"","text_color":"","bg_style":0,"bg_color":"","border_color":""},"avatar_subscript":0,"nickname_color":"","role":0,"avatar_subscript_url":""},"pendant":{"pid":0,"name":"","image":"","expire":0,"image_enhance":"","image_enhance_frame":""},"nameplate":{"nid":10,"name":"見習偶像","image":"http://i0.hdslb.com/bfs/face/e93dd9edfa7b9e18bf46fd8d71862327a2350923.png","image_small":"http://i2.hdslb.com/bfs/face/275b468b043ec246737ab8580a2075bee0b1263b.png","level":"普通勛章","condition":"所有自制視頻總播放數\u003e=10萬"},"user_honour_info":{"mid":0,"colour":null,"tags":[]},"is_followed":false,"top_photo":"http://i0.hdslb.com/bfs/space/cb1c3ef50e22b6096fde67febe863494caefebad.png","theme":{},"sys_notice":{},"live_room":{"roomStatus":1,"liveStatus":0,"url":"https://live.bilibili.com/2153512","title":"啥呀這是","cover":"http://i0.hdslb.com/bfs/live/user_cover/20e11be91ed85436a8800dafb3d3550736cb1899.jpg","online":0,"roomid":2153512,"roundStatus":0,"broadcast_type":0},"birthday":"03-08","school":{"name":"成都信息工程大學"},"profession":{"name":""},"tags":null,"series":{"user_upgrade_status":3,"show_upgrade_window":false}}}

其中?"face":"http://i2.hdslb.com/bfs/face/bce14f5e3af4bca480fc7de227986ba304507078.jpg" 就是我們的頭像圖片鏈接，再把這個鏈接放到以上方式的url中即可。

上代碼：

esp_err_t cjson_face(char *text) {cJSON *root_ksdiy, *psub_ksdiy;char *index = strchr(text, '{');printf("face json:%s\n", text);if (index == NULL){return ESP_FAIL;}else{strcpy(text, index);root_ksdiy = cJSON_Parse(text);if (root_ksdiy != NULL){psub_ksdiy = cJSON_GetObjectItem(root_ksdiy, "data");if (psub_ksdiy != NULL){cJSON *name = cJSON_GetObjectItem(psub_ksdiy, "name");wp_fans.name = name->valuestring;cJSON *face_url = cJSON_GetObjectItem(psub_ksdiy, "face");wp_fans.face_url = face_url->valuestring;ESP_LOGI(TAG, "獲取頭像URL成功 name:%s face_url:%s\n", wp_fans.name, wp_fans.face_url);memset((char *)url_buff, 0, 256);sprintf(url_buff, "%s", face_url->valuestring);_get_face_url = true;}else{_get_face_url = false;ESP_LOGI(TAG, "獲取頭像URL，請檢查uid");}}else{return ESP_FAIL;}cJSON_Delete(root_ksdiy);}return ESP_OK; } static esp_err_t bilibili_face_http_event_handler(esp_http_client_event_t *evt) {switch (evt->event_id){case HTTP_EVENT_ERROR:ESP_LOGI(TAG, "HTTP_EVENT_ERROR");break;case HTTP_EVENT_ON_CONNECTED:ESP_LOGI(TAG, "HTTP_EVENT_ON_CONNECTED");break;case HTTP_EVENT_HEADER_SENT:ESP_LOGI(TAG, "HTTP_EVENT_HEADER_SENT");break;case HTTP_EVENT_ON_HEADER:ESP_LOGI(TAG, "HTTP_EVENT_ON_HEADER, key=%s, value=%s", evt->header_key, evt->header_value);break;case HTTP_EVENT_ON_DATA:printf("HTTP_EVENT_ON_DATA, len=%d\n", evt->data_len);//如果404或者502if (evt->data_len == 150 || evt->data_len == 146)return ESP_OK;// printf("%.*s\n", evt->data_len, (char *)evt->data);cjson_face((char *)evt->data);break;case HTTP_EVENT_ON_FINISH:ESP_LOGI(TAG, "HTTP_EVENT_ON_FINISH");break;case HTTP_EVENT_DISCONNECTED:ESP_LOGI(TAG, "HTTP_EVENT_DISCONNECTED");break;}return ESP_OK; } void get_face_url(char *bili_uid) {static char post_url[256] = {0};memset((char *)post_url, 0, 256);static esp_http_client_config_t config = {// .url = "https://api.bilibili.com/x/relation/stat?vmid=59041601&jsonp=jsonp",.event_handler = bilibili_face_http_event_handler,.buffer_size = 3 * 1024,.timeout_ms = 4000,.path = "/get",.transport_type = HTTP_TRANSPORT_OVER_TCP,};sprintf(post_url, "https://api.bilibili.com/x/space/acc/info?mid=%s", bili_uid);config.url = post_url;esp_http_client_handle_t client = esp_http_client_init(&config);esp_http_client_set_header(client, "Accept", "*/*");esp_http_client_set_header(client, "Accept-Encoding", "identity");esp_http_client_set_header(client, "User-Agent", "PostmanRuntime/7.24.1");esp_http_client_set_header(client, "Connection", "keep-alive");esp_http_client_set_header(client, "Content-Type", "application/json");esp_err_t err = esp_http_client_perform(client);if (err == ESP_OK){ESP_LOGE(TAG, "HTTP GET Status = %d, content_length = %d",esp_http_client_get_status_code(client),esp_http_client_get_content_length(client));}else{ESP_LOGE(TAG, "HTTP GET request failed: %s", esp_err_to_name(err));}esp_http_client_cleanup(client); }

最后，獲取了B站的頭像buffer，我們還要顯示出來，在這里要使用到lvgl的split jpg庫并對庫做一些修改，因為原來的庫是不會縮放jpg的，我們得到的頭像buffer一般比較大，顯示出來整個屏幕都沒了，所以需要縮小，

?

.H文件中增加以下define：

/********************** DEFINES*********************//* Scaling factor */ // #define LV_TJPGD_CONFIG_SCALING_FACTOR_NONE //#define LV_TJPGD_CONFIG_SCALING_FACTOR_1_2 #define LV_TJPGD_CONFIG_SCALING_FACTOR_1_4 //#define LV_TJPGD_CONFIG_SCALING_FACTOR_1_8/* When setting scaling factor to none we should set JD_USE_SCALE to 0* set it to 1 otherwise */ #if defined (LV_TJPGD_CONFIG_SCALING_FACTOR_NONE)#define LV_TJPGD_SCALING_FACTOR 0#define LV_TJPGD_SCALING_FACTOR_DIV 1 #elif defined (LV_TJPGD_CONFIG_SCALING_FACTOR_1_2)#define LV_TJPGD_SCALING_FACTOR 1#define LV_TJPGD_SCALING_FACTOR_DIV 2 #elif defined (LV_TJPGD_CONFIG_SCALING_FACTOR_1_4)#define LV_TJPGD_SCALING_FACTOR 2#define LV_TJPGD_SCALING_FACTOR_DIV 4 #elif defined (LV_TJPGD_CONFIG_SCALING_FACTOR_1_8)#define LV_TJPGD_SCALING_FACTOR 3#define LV_TJPGD_SCALING_FACTOR_DIV 8 #else#error "Invalid TJPGD scaling factor configuration" #endif // defined

?最后顯示：

lv_img_dsc_t bili_face = {.header.always_zero = 0,.header.w = 300,.header.h = 300,.data_size = 300 * 300 * 2,.header.cf = LV_IMG_CF_RAW,.data = NULL, };img_face = lv_img_create(scr_body, NULL);lv_obj_add_style(img_face, LV_IMG_PART_MAIN, &style_img);lv_obj_set_pos(img_face, APP_WIN_WIDTH / 2 - 40, 70);bili_face.data = (uint8_t *)face_buffer;//把在線獲取的buffer給imglv_img_set_src(img_face, &bili_face);

?

總結

以上是生活随笔為你收集整理的ESP32-S3 LVGL http下载B站头像 JPG显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。