Fork me on GitHub 盒子
盒子
文章目录
  1. 背景
  2. 自己实现图片缩略图
    1. Step1
    2. Step2
    3. Step3
    4. Step4:
  3. 总结

Nodejs创建缩略图

背景

团队站项目页因为采用瀑布流形式展示,同屏幕出现了大量大尺寸图,影响了页面的流畅度。

经过测试:

  1. 全部更换为一张大图,页面流畅
  2. 参考首页,多张正常大小图,页面流畅

基本可以确定:图大而且多,是导致页面卡顿的“真凶”

自己实现图片缩略图

Step1

缩略图嘛,首先要有原图,然后必然要对图片进行处理。Node里面,要处理图片,无非就是使用二进制流,然后通过Buffer去Do anything what you want…

Step2

对图片进行处理,我这里采用的是gm模块,人家有现成的轮子为啥要自己封装,484傻…gm模块必须依赖于一个本地图片处理软件。

这里有两个选择:GraphicsMagickImageMagick。我选择的是前者,你问我为什么?因为它前啊~

安装的教程自己google去,不用谢哈~注意:需要添加到环境变量。

Step3

安装完成后,就是在nodejs下使用gm模块了

1
2
3
4
5
6
7
8
9
10
// import gm module
var gm = require("gm");
// use example
gm(filePath)
.resize(100,200))
.write("upload/" + outPath, function (e) {
if(e) { logger.error("gm写图片失败了")}
console.log("成功在本地生成缩略图 upload/"+ outPath);
// Do something
});

上述代码实现的是通过gm读取文件路径为filePath的文件,然后生成一张100X200的缩略图,接着写入生成到upload文件夹下的outPath下。运行一下,发现会抛出error,因为outPath的文件夹目录不存在。

为什么会不存在路径?

因为我吃饱没事每个文件夹都打开然后找到之后自己创建吗,吃力不讨好。所以在这里,就是我前面文章介绍的mkdir模块大放异彩的时候啦~

1
2
3
4
5
6
7
8
9
10
11
var gm = require("gm");
var mkdirs = require('jm-mkdirs');
mkdirs.sync("upload/" + tempArr.join("/")); // 就是这句
gm(filesList[imageIdx].path)
.resize(304,Math.ceil(304/filesList[imageIdx].radio))
.write("upload/" + outPath, function (e) {
if(e) { logger.error("gm写图片失败了")}
console.log("成功在本地生成缩略图 upload/"+ outPath);
logger.debug("成功在本地生成缩略图 upload/"+ outPath);
// Do something
});

这样会在一个新的本地路径下生成一个同结构的缩略图文件夹了。Perfect!

Step4:

修改一下自己的需求任务,我这里是上传到云存储,同时上传原图和缩略图到云存储即可。

Alt text

总结

  1. 自己开发的生成缩略图的功能目前也只是支持缩略图,要达到自定义宽高,质量等多方面辅助实现,还是离不开服务器的支持。
  2. 目前缩略图还可以增加根据图片大小生成SHA码,来作为标识,可以进行对比,用于文件的对比更新,做增量修改。

如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen