Git Product home page Git Product logo

xlzy520 / bilibili-img-uploader Goto Github PK

View Code? Open in Web Editor NEW
366.0 6.0 33.0 1018 KB

Chrome/Firefox/Edge Extension bilibili img uploader。哔哩哔哩图床上传插件.https://chrome.google.com/webstore/detail/b%E7%AB%99%E5%9B%BE%E5%BA%8A/domljbndjbjgpkhdbmfgmiclggdfojnd?hl=zh-CN

Home Page: https://chrome.google.com/webstore/detail/b%E7%AB%99%E5%9B%BE%E5%BA%8A/domljbndjbjgpkhdbmfgmiclggdfojnd?hl=zh-CN

License: MIT License

JavaScript 4.67% HTML 0.65% Vue 43.74% TypeScript 39.71% SCSS 11.23%
chrome-extension bilibili picbed chrome bilibili-api firefox-addon img extension bili-short-url

bilibili-img-uploader's Introduction

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

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

说明(2023-12-06)

由于B站将之前的图片上传接口返回的图片链接不是永久的了,其他接口又因为Origin会被拦截,因此在v2.2.0版本之后,不会在右上角打开弹窗了,而是打开一个不存在的B站页面并注入插件。

在线安装

Chrome、Edge

Firefox

在线使用

假如有需要使用Web版本的图床上传工具,那么可以使用这个地址,但是需要填写自己B站的SESSDATA和bili_jct,如果您有顾虑,还是建议使用客户端版

Web在线版

本地安装

下载

安装步骤

  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
    }
}

图片样式

Type Url
原图 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参数失效

防盗链解决方案

全站图片使用

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

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

新窗口打开

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

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

感谢

本项目得到以下项目的支持与帮助,在此表示衷心的感谢!

bilibili-img-uploader's People

Contributors

xlzy520 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

bilibili-img-uploader's Issues

[建议]复制按钮的行为与「默认复制格式」保持一致

在「已传图片」页面, 列表中的复制按钮, 点击似乎是没有反应的, 希望这个按钮的点击行为与「图片上传」页面的「默认复制格式」选项行为保持一致。

这样改动可以加快复制行为的速度。现有的流程hover到按钮等待菜单弹出, 再移动光标点击菜单项, 这个操作流程在图片多了之后需要连续操作时有些难受 (如果采纳了建议, 为了保证一致, 默认复制格式的radio也应该加入“原图”选项)

几个小问题

  1. 界面显示问题,如图:image
  2. 图片列表滚轮失效
  3. 一个疑问,按下图说明处理图片还是403,最后网上找了个办法,在img标签里面加上referrerpolicy="no-referrer"就可以了。所以是我操作有问题还是办法失效了?image

用的chrome 112.0.5615.87,扩展2.1.2

FireFox 无法复制链接

FireFox 插件复制链接按钮失效。点击时,显示复制成功,实际上什么结果都没复制或者有时只会给个文件路径。只能导出json数据后,复制里面的链接。
但是在Microsoft Edge里测试时没有这种情况

批量处理

既然可以批量导出,请问批量导入的格式是什么?

建议:上传后在已上传图片里保留一列显示原图片名字。

近期把图片都更换到b站的图床上了,在此非常感谢作者。速度确实非常快。

主要是一次性上传多个图片之后,就没法找到原图挨个复制了,得点开看图片挨个对比。效率有点低。

如果保留一列显示原图片名字,这样可以直接复制,效率会高很多,也不怕搞乱。

上传失败!

API依然可用,但是chrome浏览器插件上传失败。API直接返回错误信息,疑似升级了API,屏蔽了插件。😥

谷歌在线版上传失败

按照新的自述文档操作 ,没有转到新的Tab页面。
用QQ截图 “Ctrl+Alt+A" 后鼠标对着 “哔哩哔哩图床” 插件空白处按下 “Ctrl+V” 粘贴键,此时的 “哔哩哔哩图床” 插件界面直接收缩到右上角最小化且无任何提示。尝试使用上传功能也没有生效!
我的操作系统信息
q1
系统版本:Windows 10 Pro x64 (1909 OS 内部版本 18363.693)
Google Chrome版本: 88.0.4324.190x64(正式版本)

Gitbook防盗链问题

像Gitbook这种不能增加HTML标签

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

防盗链的好像用不了吧
我用的是官网Gitbook同步到Github

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.