Picgo 配置Bilibili 图床

picgo-plugin-bilibili 为 PicGo 开发的一款插件,新增了B站图床 图床。 使用用户动态的图片上传API。填写SESSDATA即可,获取方式在下面。

[TOC]

在线安装

  • 在线安装

    打开 PicGo 详细窗口,选择插件设置,搜索bili安装,然后重启应用即可。

  • 离线安装

    克隆该项目,复制项目到 以下目录:

    • Windows: %APPDATA%\picgo\
    • Linux: $XDG_CONFIG_HOME/picgo/ or ~/.config/picgo/
    • macOS: ~/Library/Application\ Support/picgo/

    切换到新目录执行 npm install ./picgo-plugin-bilibili,然后重启应用即可。

获取B站SESSDATA

  1. 登录B站
  2. F12打开控制台
  3. 找到SESSDATA复制即可

图片样式

例如原图: https://i0.hdslb.com/bfs/albu...

规定高宽,质量压缩: https://i0.hdslb.com/bfs/albu...

TypeUrl
原图baseURL/1.jpg
原分辨率,质量压缩baseURL/1.jpg@1e_1c.jpg
规定宽,高度自适应,质量压缩baseURL/1.jpg@104w_1e_1c.jpg
规定高,宽度自适应,质量压缩baseURL/1.jpg@104h_1e_1c.jpg
规定高宽,质量压缩baseURL/1.jpg@104w_104h_1e_1c.jpg
原分辨率,webp格式(占用最小)baseURL/1.jpg@104w_104h_1e_1c.webp
规定高度,webp格式(占用最小)baseURL/1.jpg@104w_104h_1e_1c.webp

格式:(图像原链接)@(\d+[whsepqoc]_?)*(.(|webp|gif|png|jpg|jpeg))?$

  • w:[1, 9223372036854775807] (width,图像宽度)
  • h:[1, 9223372036854775807] (height,图像高度)
  • s:[1, 9223372036854775807] (作用未知)
  • e:[0,2] (resize,0:保留比例取其小,1:保留比例取其大,2:不保留原比例,不与c混用)
  • p:[1,1000] (默认100,放大倍数,不与c混用)
  • q:[1,100] (quality,默认75,图像质量)
  • o:[0,1] (作用未知)
  • c:[0,1] (clip,0:默认,1:裁剪)
  • webp,png,jpeg,gif(不加则保留原格式)
  • 不区分大小写,相同的参数后面覆盖前面
  • 计算后的实际wh不能大于原wh,否则wh参数失效

解决B站防盗链(403)

B站开启了防盗链,利用的是HTTP的Referer属性做判断。如果Referer是他白名单之外的网站,就会返回403
全站图片使用

在html的head标签中设置如下标志,那么全站资源引用都不会携带referrer

<meta name="referrer" content="no-referrer">
新窗口打开

主要设置rel="noreferrer",使用window.open打开的话是会默认携带referrer的,第一次还是会403

<a rel="noreferrer" target="_blank"></a> 

Typora插件-Bilibili图床

哔哩哔哩图片上传, Typora插件,实现图片粘贴即可上传到哔哩哔哩,并替换链接

重要提示

由于B站相簿的上传API自身出现问题,现在切换到动态的图片API,因此需要多加一个参数csrf(为Cookie里面的bili_jct)

示例

插件客户端路径 token=0829d25Cdd19b*b1 csrf=cb397c0fbf619237

用Go重写,产物缩小5倍体积,点击下载即可

image

之前的

image

插件下载

项目地址(求颗Star呀)

typora-plugin-bilibili

typora免费版下载

直接使用

  1. 上一步根据自己的系统下载相应的包
  2. 获取SESSDATA: 登录哔哩哔哩→F12打开控制台→Application→Cookies→SESSDATA

  3. 获取csrf: 登录哔哩哔哩→F12打开控制台→Application→Cookies→bili_jct
  4. 进入Typora设置,选择图像Tab,插入图片时选择上传图片,然后将插件的绝对路径填入命令。如下地方,例如

     # Mac、Linux
    /Users/xxx/bilibili/typora-plugin-bilibili-macos token=你的SESSDATA csrf=你的bili_jct
    # Windows
    D:\Downloads\typora-plugin-bilibili-win.exe token=你的SESSDATA csrf=你的bili_jct

    其中很重要的后面的 token=你的SESSDATA ,没有这句的话,无法上传成功,如果发现上传失败,那应该就是SESSDATA过期了,需要手动更新

MacOS

image-20210608201909889

特别的

Macos 平台的都是需要授权该可执行文件的

  1. M1芯片的Mac,需要执行以下命令
chmod a+x ./ 文件名
  1. 非M1芯片的,设置打开方式为终端打开,尝试打开时会提示无权限,然后去系统偏好设置->通用,点击允许

Windows

填入下载的exe文件的完整路径

演示

<details open="" class="details-reset border rounded-2" style="box-sizing: border-box; display: block; border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !important; border-radius: var(--primer-borderRadius-medium, 6px) !important; margin-top: 0px; margin-bottom: 16px; color: rgb(36, 41, 47); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Noto Sans&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><summary class="px-3 py-2" style="box-sizing: border-box; display: list-item; cursor: pointer; padding-top: var(--base-size-8, 8px) !important; padding-bottom: var(--base-size-8, 8px) !important; padding-right: var(--base-size-16, 16px) !important; padding-left: var(--base-size-16, 16px) !important; list-style: none; transition: color 80ms cubic-bezier(0.33, 1, 0.68, 1) 0s, background-color, box-shadow, border-color;"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video"><path fill-rule="evenodd" d="M16 3.75a.75.75 0 00-1.136-.643L11 5.425V4.75A1.75 1.75 0 009.25 3h-7.5A1.75 1.75 0 000 4.75v6.5C0 12.216.784 13 1.75 13h7.5A1.75 1.75 0 0011 11.25v-.675l3.864 2.318A.75.75 0 0016 12.25v-8.5zm-5 5.075l3.5 2.1v-5.85l-3.5 2.1v1.65zM9.5 6.75v-2a.25.25 0 00-.25-.25h-7.5a.25.25 0 00-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-4.5z"></path></svg><span> </span><span aria-label="Video description 2021-05-17.17.05.09.mov" class="m-1" style="box-sizing: border-box; margin: var(--base-size-4, 4px) !important;">2021-05-17.17.05.09.mov</span><span> </span><span class="dropdown-caret" style="box-sizing: border-box; border-bottom-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); border-style: solid; border-width: var(--primer-borderWidth-thicker, 4px) var(--primer-borderWidth-thicker, 4px) 0; content: &quot;&quot;; display: inline-block; height: 0px; vertical-align: middle; width: 0px;"></span></summary><video src="https://user-images.githubusercontent.com/28336270/118472778-d3d77b80-b73b-11eb-951a-7efb1e5bf15f.mov" data-canonical-src="https://user-images.githubusercontent.com/28336270/118472778-d3d77b80-b73b-11eb-951a-7efb1e5bf15f.mov" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="box-sizing: border-box; display: block !important; border-top: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !important; border-bottom-right-radius: var(--primer-borderRadius-medium, 6px) !important; border-bottom-left-radius: var(--primer-borderRadius-medium, 6px) !important; max-width: 100%; max-height: 640px; min-height: 200px;"></video></details>

http://i0.hdslb.com/bfs/album...

404解决方案

全站图片使用

在html的head标签中设置如下标志,那么全站资源引用都不会携带referrer

<meta name="referrer" content="no-referrer">

新窗口打开

主要设置rel="noreferrer",使用window.open打开的话是会默认携带referrer的,第一次还是会403

<a rel="noreferrer" target="_blank"></a>

浏览器插件-Bilibili图床

B站图床、短链(Firefox、Chrome、Edge)

哔哩哔哩图床插件,速度快,多种图片压缩格式选择,自动读取Bilibili的Cookie,不再需要手动输入。 基于vitesse-webext 重构

在线安装

Chrome、Edge

Firefox

本地安装

下载

安装步骤

  1. 进入拓展程序,可以通过地址栏输入chrome://extensions/,也可以从 更多工具->拓展程序进入
  2. 右上角开启开发者模式
  3. 左侧点击 加载已解压的拓展程序,然后选择上面下载好的压缩包解压后的文件夹即可。

本地开发(支持热更新)

  1. 执行npm i或者pnpm i, 执行npm run devpnpm run dev
  2. 上一步(安装步骤)将文件夹选择为extension文件夹

构建

执行npm run buildpnpm run build

截屏

哔哩哔哩上传接口返回格式

{
    "code": 0,
    "message": "success",
    "data": {
        "image_url": "http://i0.hdslb.com/bfs/album/104c4f1ae6b66d78a5952a191281ec7883dc5c5c.jpg",
        "image_width": 818,
        "image_height": 1000
    }
}

本文由mdnice多平台发布


Young
10 声望0 粉丝