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

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

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


七牛云图片瘦身imageslim

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

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

图片瘦身和其他图像处理操作同时使用时,只需在其他参数后加|imageslim即可

  • 图片瘦身和自动旋正同时使用:
    <img src="https://oiijtsooa.qnssl.com/of591993aa064b7.jpg?imageMogr2/auto-orient|imageslim" alt="">
  • 图片瘦身和缩略图同时使用:
    <img src="https://oiijtsooa.qnssl.com/of591993aa064b7.jpg?imageMogr2/thumbnail/100x/blur/1x0/quality/75|imageslim" alt="">

手动调用示例


IMG_3603瘦身前

IMG_3603瘦身后

七牛云缩略图thumbnail

七牛云提供缩略图功能,可以在图形界面直接点选处理,在“对象存储”,“图片样式”中新建图片样式,如下图:


缩略图设置

选择“基础缩略剪裁”后生成的参数是imageView2开头的,选择“高级缩放剪裁”生成的参数是imageMogr2开头的。
七牛云已经提供了一些模版,比如常用的“指定宽度,高度自适应”,我在做轮播相册缩略图时就用的这个,可自己指定宽度像素值,然后在右面有实时预览和最终的参数代码,非常方便,选择完保存后,可随时在图片样式中看到自己创建的样式

使用示例:
https://ojpbly1un.qnssl.com/gogopher.jpg?imageMogr2/thumbnail/100x/blur/1x0/quality/75

结果如下图:


示例图片缩略图

如果想知道具体参数的含义,可以参考七牛云的API手册:


七牛云图片加水印watermark

七牛云存储提供三种水印接口:图片水印、文字水印,以及一次请求中同时打多个水印。
详细使用方法可参考官方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

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信息自动旋正,便于后续处理。

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


上一篇 Spring-JMX

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

阅读
1,411
阅读预计5分钟
创建日期 2017-12-03
修改日期 2018-05-26
类别
标签
百度推荐