Nodejs创建缩略图

[ChenJiaH]

首发于微信公众号《前端成长记》，写于 2016.12.13

背景

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

经过测试：

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

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

自己实现图片缩略图

Step1

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

Step2

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

这里有两个选择：GraphicsMagick和ImageMagick。我选择的是前者，你问我为什么？因为它前~囧~

安装的教程请google~

注意：需要添加到环境变量。

Step3

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

// 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模块大放异彩的时候啦~

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

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

总结

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

（完）

---

本文为原创文章，可能会更新知识点及修正错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验 如果能给您带去些许帮助，欢迎 ⭐️star 或 ✏️ fork (转载请注明出处：https://chenjiahao.xyz)