新浪微博图床的 Chrome 扩展

简介

上传图片到微博并生成外链的 Chrome 浏览器扩展(最低版本支持:Chrome 59)

功能

  • 支持点选、拖拽、粘贴以及页面右键菜单上传图片到微博并同步到微相册
  • 支持 JPEG、PNG、GIF 三种图片格式
  • 支持 BMP、WebP、ico、SVG 有损转换为 PNG
  • 支持把 HTML5 视频的当前帧上传为 JPG 图像(2.2.3 新增)
  • 支持查看上传记录,简单的浏览及删除操作
  • 支持生成 URL、HTML、UBB、Markdown 四种格式
  • 支持单条、多条模式的复制操作
  • 支持选择协议(http、https 和相对协议)
  • 支持三种固定裁剪尺寸和用户自定义尺寸

操作指南

提示说明

弹窗属于单例模式,在同一时间只能打开一个。在弹窗处于最小化的情况下,用户再去点击 icon 按钮会出现上图的闪烁提示,表示弹窗已经处于打开状态。(上图是 Windows 10 的提示,不同的操作系统略有差异)

提示说明

上图展示的是扩展中常用的提示,一般出现在主屏幕的右下角。通常在一定时间后会自动消失,但是有两种提示框需要达到特定条件才会消失。一种是进度条提示,它会在图片上传流程结束自动关闭。另一种是检测到微博没有登录的提示,需要用户按照提示操作或者手动点击关闭。

弹窗说明

  1. 地址协议选择
  2. 图片裁剪选择
  3. 在单条和多条复制模式之间切换的按钮
  4. 上传记录按钮
  5. 选择上传图片的按钮
  6. 复制当前类型的地址,批量模式下会复制此类型的所有地址
  7. 粘贴区域。弹窗中所有的虚线类型区域在获得焦点,即变绿色后均可以进行粘贴操作
  8. 拖拽区域(弹窗任何区域都可以使用)

粘贴区域额外说明:

因为粘贴图片文件实际上是一种相当受限的操作,所以这里的粘贴操作被稍稍的加强了一下。粘贴区域额外的支持粘贴图片地址,可以对其它图片地址上传到微相册提供极大的便利。微博自身的地址,即域名中包含 .sinaimg.cn 字符串的地址是不支持粘贴上传的,这是为了避免误操作。(用其它方式上传图片没有这种限制)

右键菜单

如果可以获取到页面中的图片,则会在右键菜单中显示把这张图片上传到微相册的选项,点击后会自动上传,上传结束后会出现提示。如果上传成功,该图片的地址就自动在剪切板中,可以粘贴使用了。注意:这里的上传操作没有进度提示,最终的结果只有成功和失败。如果在没有结果返回的情况下,用户对另一张图片执行了相同的操作,那么剪切板中会是最后成功上传的图片地址。

右键菜单

如果可以获取到页面中 HTML5 的视频并且原生的右键菜单可用,则会在右键菜单中显示把当前的视频帧上传到微相册的选项,上传流程和上述图片一样。

右键菜单

如果页面中 HTML5 视频在其他容器的下层,或者原生的右键菜单被屏蔽了。可以使用默认快捷键 Shift+Alt+T(可在 chrome://extensions 键盘快捷键中修改按键)来修改页面元素,让 HTML5 视频可以被右键菜单捕获并且原生右键菜单这时候处于可用状态。需要注意,在页面元素处于修改状态中,页面上的其他元素不可以被鼠标选中,并且页面周围会显示红白相间的条纹表示页面元素处于修改状态。再次按下快捷键 Shift+Alt+T 即可退出这种状态,恢复正常。

  1. 红白相间的条纹提示线
  2. 原生的右键菜单
  3. 在页面未修改场景下的右键菜单

上传记录

  1. 从相册中移除这张图片(移除后图片的地址依然可以访问)
  2. 在图片上右击可以复制图片地址(上面的是复制原图地址,下面的是复制当前显示的图片地址)
  3. 图片的创建时间
  4. 上一页按钮(禁用状态)
  5. 下一页按钮(可用状态)
  6. 使用微相册管理这些图片
  7. 捐赠支持一下
  8. 在 GitHub 上提交建议或者 Bug
  9. 在博客中提交建议或者 Bug(如果不方便使用 GitHub)
  10. 使用电子邮件联系我
  11. 当前的页数和总页数

概念

以下是针对弹窗模式的说明:

当产生上传流程时,进度条会出现。当上传流程结束时,进度条关闭并提示图片上传流程结束。

弹窗模式最重要的一点是不区分单个文件和多个文件,它们被视为是一样的,那么上传流程如何工作呢?

当上传流程进行中时,弹窗没有被锁死,这个时候用户依然可以继续添加图片,所有图片上传结束后,这些图片会和前面的图片一同出现的列表中。这对小水管用户传大图、多图非常实用。

当上传流程结束后,用户选择继续上传图片,在这些图片上传成功时,已存在的列表会被清空,新的图片会被添加到列表中。如果用户误操作清空了列表,可以通过上传记录来获得以前图片的地址。

微相册命中规则的说明:

  • 拉取用户的前 100 个相册
  • 检测本地存储的相册 ID 是否在拉取的列表中
  • 检测拉取相册中是否带有 64 位特征码的相册

如果上面的步骤没有查找到指定的相册,并且用户当前的相册总数小于 100,那么创建供此插件传图使用的相册(这个相册是属于用户私有,好友不可见的)。

以上条件都不符合,则不会同步图片。

附加

已知的自定义裁剪格式:

  • large -> 原始图片
  • mw690 -> 最大 690 像素宽度裁剪
  • thumbnail -> 缩略图
  • small -> 小图
  • square -> 80 像素正方形裁剪
  • thumb150 -> 150 像素正方形裁剪
  • thumb180 -> 180 像素正方形裁剪
  • thumb300 -> 300 像素正方形裁剪
  • orj180 -> 180 像素宽度原比例缩放
  • orj360 -> 360 像素宽度原比例缩放
  • crop.x.y.x1.y1.w -> 自定义矩形裁剪,其中 x, y 表示左上角坐标,x1, y1 表示右下角坐标,w 是宽度

FAQ

Q: 图片上传到哪儿了?
A: 上传到微博上了

Q: 如何管理已上传的图片?
A: 上传记录或者微相册均可以管理

Q: 如何删除已上传的图片?
A: 目前无法删除,微相册中的删除是针对相册的操作,对图片本身没有影响

Q: JPG 和 JPEG 有什么区别?
A: JPEG 是图片格式,JPG 是 JPEG 图片格式常用的一种文件扩展名

Q: 粘贴上传没有效果?
A: 粘贴上传只支持复制图片文件,在资源文件管理器中的复制文件并粘贴是没有效果的

Q: 上传的是 PNG 图片,返回的却是 JPG 后缀的地址?
A: 微博不支持 PNG 后缀,后缀对于浏览器判断图片的格式是没有影响的

Q: 如何使用自定义裁剪?
A: 自定义裁剪的格式需要微博支持,否则生成的地址是不能正常问的

Q: 裁剪操作对图片的影响?
A: 裁剪适用于 JPEG 格式的图片。PNG 图片裁剪后会丢失透明通道,GIF 则会变成静态图片

Q: 删除一张图片且页面刷新后,页面上的图片数量少了一个?
A: 属于正常情况,服务器返回的数据时效性不足,脚本做了些弥补,因此会出现这种情况

前往 Chrome 商店下载
前往 GitHub 查看源代码

发布者

Hellcom

还有很多事情要做,爆炸的一年。本人目前在 B 站从事 HTML5 播放器开发的相关工作。

15 thoughts on “新浪微博图床的 Chrome 扩展”

  1. woriginal -> 并不清楚和large有啥区别
    bmiddle -> 没研究过
    wap50 -> orj50返回404;50像素宽度图像,原图超过则缩小
    wap120 -> 不明
    wap180 -> 并不清楚和orj180有啥区别
    wap240 -> orj240返回404;240像素宽度图像,原图超过则缩小
    wap360 -> 并不清楚和orj360有啥区别
    wap720 -> orj720返回404;720像素宽度图像,原图超过则缩小
    wap800 -> orj720返回404;800像素宽度图像,原图超过则缩小

    1. @Hellcom 哇,那真是太好了!我用来做静态存储的域名证书是 startssl 的,新版 chrome 直接挂了,这几天还寻思要不要搞个泛域名证书。新浪既然支持 https 了就不用折腾了。

  2. 你好,我用这个插件有一段时间了,非常棒,谢谢你。我在用的时候曾经有过这样一个问题:有时候(情况比较少)上传上去的链接不能用,找不到那个URL,我再次上传后,就能用了。当我再次去访问第一次上传的图片还是访问不了。这个问题我在前一段时间能遇到,现在已经见不到了。可能是你在版本更新的时候解决了这个问题吧。

    1. @蒋继伟 微博会对图片进行鉴黄判断,有些图片会被误判,导致上传的图片被立即删除。如果你说的不是这种情况,下次出现时,可以记录下上传的图片、上传得到的链接以及访问图片的错误截图,便于查找错误来源。

  3. 此插件与QQ邮箱有冲突,在QQ邮箱查看邮件详情时,出现两个红色边框的 层 遮挡了页面,请自己测试!!!!

    是不是往页面注入了什么样式?

发表评论

电子邮件地址不会被公开。 必填项已用*标注