欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript復(fù)原何同學(xué)B站頭圖細節(jié)示例詳解

 更新時間：2022年07月19日 10:34:57   作者：大帥老猿  
這篇文章主要為大家介紹了JavaScript復(fù)原何同學(xué)B站頭圖細節(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

在今年初，B站頒布了2021年的百大UP。我很喜歡其中一位UP主 @老師好我叫何同學(xué) ，他的每一個視頻都非常的有創(chuàng)意。

何同學(xué)也是一個極其注重細節(jié)的人，點進何同學(xué)的B站個人空間，細心的小伙伴肯定能關(guān)注到他個人空間的頭圖，右邊顯示的數(shù)字其實是何同學(xué)上次投稿距今的時間，這個數(shù)字每天都會變。

這也太細節(jié)了吧~

我并不知道何同學(xué)具體是如何實現(xiàn)的，但大帥作為一個熱愛編程的老程序猿，思路很快就在我腦海里浮現(xiàn)出來了。花了一天的時間敲代碼和Debug，我已經(jīng)完全實現(xiàn)了和何同學(xué)一樣的效果，并且無需服務(wù)器無需打開電腦，頭圖每天也會自動更新。

代碼已在github開源，如果你只是想使用它，并不想知道技術(shù)細節(jié)，請直接跳到最后看使用教學(xué)。

接下來我會手把手教你一步步去實現(xiàn)它，如果你想跟我一起用編程玩轉(zhuǎn)創(chuàng)意，也請點贊收藏分享支持一下吧。

本文配套視頻：www.bilibili.com/video/BV1bS…

手把手實現(xiàn)它

好的，接下來你會學(xué)習(xí)到

  • 如何抓取B站的請求
  • 在nodejs里生成圖片
  • 獲得用戶最新的投稿計算日子
  • GithubAction定時更新頭圖

如何抓取B站的請求

自動的前提是手動，所以我們要先了解如何手動操作才可以更換個人空間頭圖（此功能需要B站的大會員），打開B站你的個人空間，點擊頭圖右上角的這個區(qū)域更換皮膚

在網(wǎng)頁底部會彈出更換頭圖的操作面板，上傳任意圖片作為頭圖的功能只有大會員才有。

接下來常規(guī)操作，我們按下F12打開調(diào)試面板，切換到network標(biāo)簽，此時我們上傳一張圖片，就可以抓取到這個上傳頭圖的接口了

https://space.bilibili.com/ajax/topphoto/uploadTopPhotov2

點擊鼠標(biāo)右鍵，選擇Copy -> Copy as Node.js fetch

打開VSCode粘貼

fetch("https://space.bilibili.com/ajax/topphoto/uploadTopPhotov2", { "headers": {  "accept": "application/json, text/plain, */*",  "accept-language": "zh-CN,zh;q=0.9",  "content-type": "application/x-www-form-urlencoded",  "sec-ch-ua": "\" Not;A Brand\";v=\"99\", \"Google Chrome\";v=\"97\", \"Chromium\";v=\"97\"",  "sec-ch-ua-mobile": "?0",  "sec-ch-ua-platform": "\"macOS\"",  "sec-fetch-dest": "empty",  "sec-fetch-mode": "cors",  "sec-fetch-site": "same-origin",  "cookie": "",  "Referer": "https://space.bilibili.com/422646817",  "Referrer-Policy": "no-referrer-when-downgrade"  },  "body": "topphoto=xxxxxx&csrf=xxxxxx",  "method": "POST"});

然后我們新建一個nodejs的項目，安裝一下node-fetch庫

//如果你的環(huán)境支持ESModule，那么使用importimport fetch from 'node-fetch';
//如果是用require導(dǎo)入
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));

現(xiàn)在你已經(jīng)可以把剛才的上傳圖片的操作通過代碼完成了，那么這一堆參數(shù)里，我們需要注意哪些呢？

  • cookie

用戶身份校驗的參數(shù)，我們主要會用到bili_jct，SESSDATA，DedeUserID， DedeUserID__ckMd5

  • body

topphoto為圖片base64編碼的數(shù)據(jù)，csrf就是bili_jct

如果是自己用，那么你只需要生成圖片并轉(zhuǎn)為base64編碼后通過topphoto參數(shù)提交給B站接口就可以了

在nodejs里生成圖片

在網(wǎng)頁里生成圖片大概率你知道要用canvas，比如我在碼上掘金里寫的這個demo。代碼片段

其實在node環(huán)境里生成圖片，也有一個canvas的庫可以用。

npm install canvas

這個庫在不同的系統(tǒng)下還需要安裝不同的底層繪制庫。

# MacOS X`brew install pkg-config cairo pango libpng jpeg giflib librsvg`
# Linux`sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev`

因為我不用windows，所以windows的小伙伴自己去看官方的安裝說明吧github.com/Automattic/…

使用這個庫繪圖的API設(shè)計和網(wǎng)頁canvas基本相同。

//導(dǎo)入canvas庫里的三個方法const { createCanvas, loadImage ,registerFont } = require('canvas');
//B站頭圖的建議尺寸是2560x400
const canvasSize = {w:2560,h:400};
//創(chuàng)建畫布const canvas = createCanvas(canvasSize.w, canvasSize.h);
//獲得畫布的繪制對象
const ctx = canvas.getContext('2d');
async function painting(){ 
    //添加背景圖 
    const bgImage = await loadImage('bg.jpg'); 
    //將圖片繪制到畫布的0,0坐標(biāo)，并設(shè)置寬和高 
    ctx.drawImage(bgImage, 0, 0, canvasSize.w, canvasSize.h); 
}
painting();

有了背景圖，現(xiàn)在我們加入文字

//注冊字體
registerFont('digit.ttf', { family: 'digit' });
//設(shè)置文字顏色和字號，字體
ctx.fillStyle = "#e6433a";
ctx.font = '97px digit';
let txt = "HELLO"
//計算文字尺寸
let size = ctx.measureText(txt);
//將文字繪制到指定坐標(biāo)
ctx.fillText(txt, 0, 0);

何同學(xué)頭圖里的文字是有垂直方向上的傾斜的，這個在canvas中也可以實現(xiàn)

//設(shè)置接下來傾斜的原點為文字的左上角ctx.translate(txt_x, txt_y);
/*
transform(a,b,c,d,e,f)a 水平縮放繪圖b 水平傾斜繪圖c 垂直傾斜繪圖d 垂直縮放繪圖e 水平移動繪圖f 垂直移動繪圖
*/
ctx.transform(1,-0.3,0,1,0,0);

接下來使用canvas.toDataURL("image/png")就可以將畫布轉(zhuǎn)換為base64編碼的數(shù)據(jù)了，這里需要注意一下，B站頭圖接口中的topphoto參數(shù)是不需要前面22個字符的圖片頭信息，所以我們還要截取一下

canvas.toDataURL("image/png").substring(22);

當(dāng)然，你現(xiàn)在并不能確定咱們生成的圖片是否正確，所以你也可以將圖片保存成本地文件先看看是不是對了

fs.writeFileSync("test.png",canvas.toBuffer());

獲得用戶最新的投稿計算日子

通過接口https://api.bilibili.com/x/space/arc/search可以抓取指定用戶的投稿視頻

//pn為頁數(shù)，ps為每頁條數(shù)，order=pubdate代表按發(fā)布時間返回數(shù)據(jù)
fetch("https://api.bilibili.com/x/space/arc/search?mid="+DEDEUSERID+"&pn=1&ps=1&order=pubdate&jsonp=jsonp");

在每條視頻的信息里，created屬性代表了發(fā)布時間（單位：秒），我們需要計算一下這個時間和當(dāng)前系統(tǒng)的時間差并轉(zhuǎn)換為天為單位

//計算兩個日期相差的天數(shù)
const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

這里推薦給大家一個網(wǎng)站，里面收錄了各種用一行代碼實現(xiàn)的功能 1loc.dev/

Github Action定時任務(wù)

Github Action是Github提供的虛擬容器服務(wù)，通俗點說就是免費給你一臺云服務(wù)器，這個云服務(wù)器的系統(tǒng)是什么，具備哪些代碼運行環(huán)境通通都可以根據(jù)配置自定義。我們通過github的工作流workflow來使用它，有趣的是，我們還可以給它設(shè)置定時任務(wù)來定期運行我們的工作流，執(zhí)行我們寫好的代碼，生成圖片上傳一氣呵成！完全免費！

打開終端/命令行，在git項目目錄下新建目錄并創(chuàng)建schedule.yml配置文件

mkdir .github
mkdir .github/workflows
touch .github/workflows/schedule.yml

schedule.yml配置

# 這個工作流的名稱
name: CI

# 工作流什么時候可以運行
on:
  # Schedule就是定時任務(wù)，由于服務(wù)在國外，所以時間需要減去8小時才是北京時間
  schedule:
    - cron: '0 16 * * *'
  # 也允許這個工作流在github aciton面板中手動觸發(fā)
  workflow_dispatch:

# 工作流內(nèi)有哪些任務(wù)
jobs:
  # 此工作流包含一個任務(wù)名為build
  build:
    # 安裝最新的ubuntu系統(tǒng)
    runs-on: ubuntu-latest

    # 此任務(wù)重包含的子任務(wù)/步驟
    steps:
      # 拉取最新的代碼
      - uses: actions/checkout@v2

      # 安裝好Nodejs的運行環(huán)境
      - name: Setup Node.js environment
        uses: actions/setup-node@v2.4.0

       # 安裝好node canvas必備的系統(tǒng)繪圖庫
      - name: Setup Basically Packages
        run:
          sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev

       # 安裝好我們自己項目的依賴包
      - name: Install NPM dependencies
        run: 
          npm install

       # 執(zhí)行我們自己的代碼
      - name: Run
        run:
          node index.js "${{secrets.BILI_JCT}}" "${{secrets.SESSDATA}}" "${{secrets.DEDEUSERID}}" "${{secrets.DEDEUSERID__CKMD5}}"

配置這樣就結(jié)束了，在北京時間每天的零點(美國時間16點)就會自動生成頭圖并上傳啦。

配置中的secrets.xxx是我們代碼運行時攜帶的參數(shù)，為了讓大家更方便的fork此開源倉庫，所以我將四個B站用戶身份所對應(yīng)的參數(shù)設(shè)置成了可自定義的。這種secrets的參數(shù)在接受自定義的同時還能保護其在Github不被泄露。

使用本項目

如果你只是想要用使用本倉庫實現(xiàn)一樣的效果，是非常簡單的，因為我都封裝好了，拿來即用

溫馨提示：只有B站大會員可以自定義頭圖

https://github.com/ezshine/auto-bilibili-topphoto

步驟1：

fork本倉庫

步驟2：

用Chrome瀏覽器打開B站，進入自己的個人空間，按下F12，切換到application標(biāo)簽

在Cookie中找到這四個參數(shù)，然后打開自己分支倉庫，點擊Settings，進入Secrets，點擊New repository secret將四個參數(shù)一一配置好

步驟3：

手動執(zhí)行一次工作流，以后就可以自動定時運行了！

恭喜，現(xiàn)在你已經(jīng)擁有了和何同學(xué)一樣有趣的全自動B站個人空間頭圖。

以上就是JavaScript復(fù)原何同學(xué)B站頭圖細節(jié)示例詳解的詳細內(nèi)容，更多關(guān)于JavaScript復(fù)原頭圖的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論