当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(19)使用七牛云图床

Hexo博客(19)使用七牛云图床

七牛云可提供免费的图床功能,把博客配图上传到七牛云,markdown文章中用链接引用图片,非常方便。由于我所有发表的博客都对应一篇笔记,所以对于已经发表博客的笔记,其中的图片也都是引的七牛云链接,不在笔记中直接存储图片,节省笔记空间而且还提高同步速度。


imageslim图片瘦身

图片瘦身服务(imageslim)在尽可能不影响画质的情况下,将JPEG、PNG格式的图片实时压缩,大幅缩小文件体积,可降低CDN分发成本并加快客户端图片的加载速度,提升用户体验。
这个功能对我来说非常实用,现在手机拍的照片,一张三四兆大小很正常,无论是放在博客还是笔记中都太大了,网速不好时加载要很长时间,自己用软件压缩又麻烦,现在还是将原版上传到七牛云,引用时直接在链接后面加个?imageslim参数即可压缩。

使用须知
支持 JPEG、PNG 格式。瘦身后画质不变,分辨率不变,格式不变,文件体积大幅缩小。
七牛存储、CDN客户都可以使用该功能。
对图片大小/分辨率没有限制,处理异常(处理超时、处理后图片大小大于原图、处理出错等)则返回原图。
支持七牛官方的管道处理、持久化、预处理等操作方式。
建议「图片瘦身」操作放在所有其他图片处理操作之后。

手动调用示例


IMG_3603瘦身前

IMG_3603瘦身后

图片水印处理

七牛云存储提供三种水印接口:图片水印、文字水印,以及一次请求中同时打多个水印。
详细使用方法可参考官方API文档,里面提供了界面操作方式,感觉不错。直接鼠标点选设置样式,最后给出url参数。

比如我自己定义了如下图像处理组合:
文字水印masikkk.com,courier new字体,16字号,蓝色,80%透明度,水印位置右下角,输出格式与原图一致、加图片瘦身。保存后的url参数为

imageView2/0/q/100|watermark/2/text/bWFzaWtray5jb20=/font/Y291cmllciBuZXc=/fontsize/320/fill/IzEzMjRFQg==/dissolve/80/gravity/SouthEast/dx/10/dy/10|imageslim

引用图片时url变为 图片url+?+url参数 即可生效,比如我们在七牛的示例图片上试一试:


水印效果

auto-orient自动旋正解决照片莫名其妙发生旋转

手机拍摄的照片,在Windows上查看正常,上传到七牛云后在为知笔记和hexo博客中通过html引用,图片发生了旋转。
原因下面这个帖子说的很清楚:

  • html显示图片时旋转了90度,为什么?
    https://segmentfault.com/q/1010000009427045?_ea=1925266
    你图片的 EXIF 里标记了旋转 Rotate 90 CW 直接打开图片 chrome 会自动调整过来。
    如 @CRIMX 回答,图片确实携带了 EXIF 的旋转标记。
    经过简单搜索,没有找到通过html直接解决此问题的方法。
    不过我的图片是使用 七牛云 进行存储的,这就显示出第三方的方便与强大
    只需要在链接后添加?imageMogr2/auto-orient参数,即可根据原图EXIF信息自动旋正。
    <img src="https://oiijtsooa.qnssl.com/of591993aa064b7.jpg?imageMogr2/auto-orient" height="100%"/>

七牛云官网对auto-orient参数的说明是:建议放在首位,根据原图EXIF信息自动旋正,便于后续处理。

可参考七牛云的图片高级处理,有更多高级功能


上一篇 Hexo博客(20)更换域名

下一篇 首次NAS组装(7)海淘硬盘历程

阅读
1,049
阅读预计4分钟
创建日期 2017-12-03
修改日期 2017-12-03
类别
标签
百度推荐