手把手教你搭建一个【文件共享平台】系列教程第七话——node后端生成缩略图（gm库使用）

本话概要

上一讲我教大家如何利用koa路由处理文件和文件夹，这一讲，我将教大家如何为上传的图片生成缩略图，并存入本地和数据库。

为什么要生成缩略图

首先，生成缩略图的意义在于可以让前端更加快速地渲染出展示图片，通常是卡片的头部，图片文件以缩略图的形式展示。点击后可预览，这时候返回原图。这样提高了前端的体验。

那么后端如何生成缩略图呢？

如何生成缩略图

安装GraphicsMagick

我们首先需要全局安装一个图片处理库——GraphicsMagick，其官网链接在此GraphicsMagick官网，GraphicsMagick windows 下载地址。

该库可以实现以下功能：

• Convert an image from one format to another (e.g. TIFF to JPEG)
• Resize, rotate, sharpen, color reduce, or add special effects to an image
• Create a montage of image thumbnails
• Create a transparent image suitable for use on the Web
• Compare two images
• Turn a group of images into a GIF animation sequence
• Create a composite image by combining several separate images
• Draw shapes or text on an image
• Decorate an image with a border or frame
• Describe the format and characteristics of an image

功能非常强大，效率很高。我们下载好安装包后，直接安装。如果没有安装这个包，后面的gm是无法处理图片的。

安装gm node包

npm install gm

其github网址是：gm，里面有详细的用法介绍。本文只涉及压缩和裁剪，所以其他功能感兴趣的可以自行了解。

实现代码

const gm = require('gm');

gm(原图片路径)
.resize(横向像素，纵向像素)
.write(压缩后图片路径, 回调函数);

我们修改上一话文件上传的代码（uploadFiles.js）：

const fs = require('fs');
const path = require('path');
const Config = require('../config.js');
const gm = require('gm');//新增代码
const MongoOpr = require('../lib/dbOpr');
const MongoDB = new MongoOpr('File');

const uploadFiles = function(file,pathname,user) {
  const filePath = Config.StorageRoot;
  const thumbnailPath = Config.ThumbnailRoot;//新增代码
  let fileReader, fileResource, writeStream;
  return new Promise((resolve,reject)=>{
    fileResource = filePath + pathname +`${file.name}`;
    let extname = path.extname(fileResource);
    let changename = path.join(thumbnailPath,pathname +`${file.name}`);//新增代码
    changename = changename.replace(/\\/g,'\/');//新增代码
    fs.exists(fileResource,function(exist){
      if(exist){
        resolve({
          status:'already',
          url:'http://'+Config.ip+':'+Config.port+'/'+changename,//新增代码
          name:`${file.name}`
        })
      }else{
        MongoDB.insertMsg({
          path:filePath + pathname,
          name:file.name,
          type:'file',
          size:file.size,
          suffix:extname,
          uploader:user,
          uploadtime:new Date().getTime(),
          downloadcount:0
        })
        fileReader = fs.createReadStream(file.path);
        writeStream = fs.createWriteStream(fileResource);
        fileReader.pipe(writeStream);

        writeStream.on('finish',function(){//原图存入本地后执行
          if(['.png','.jpg','.jpeg'].includes(extname.toLowerCase())){//新增
            gm(fileResource)
            .resize(100, 100)//压缩成100*100的图片
            .write(thumbnailPath + pathname +`${file.name}`, function (err) {//压缩后
              resolve({
                url:'http://'+Config.ip+':'+Config.port+'/'+changename,
                name:`${file.name}`
              })
            });
          }else{
            resolve({name:`${file.name}`})
          }        
        })
      }
    })
  })
};

module.exports = uploadFiles;

我们把上传的图片存入和原图平行的文件夹中，只是根目录为thumbnail，文件名一致，举例：

原图路径
http://localhost:3000/Storage/testD/test.png
缩略图路径
http://localhost:3000/Thumbnail/testD/test.png

另外，我们还需要修改文件删除函数，如果是图片文件，需要把缩略图一同删除。这里直接粘出修改的代码：

const fs = require('fs');
const path = require('path');
const Config = require('../config.js');
const MongoOpr = require('../lib/dbOpr');
const MongoDB = new MongoOpr('File');

const deleteFile = function(filename,filepath){
	let storagepath = Config.StorageRoot + `${filepath}${filename}`;
	let thumbnailpath = Config.ThumbnailRoot + `${filepath}${filename}`;
	let extname = path.extname(storagepath);
	MongoDB.deleteMsg({
		key:['path','name'],
		value:[Config.StorageRoot + `${filepath}`,`${filename}`]
	})

	return new Promise((resolve,reject)=>{
		if(['.png','.jpg','.jpeg'].includes(extname.toLowerCase())){
			if(fs.existsSync(thumbnailpath)){
				fs.unlinkSync(thumbnailpath);
			}
		}
		if(fs.existsSync(storagepath)){
			fs.unlinkSync(storagepath);
		}
		resolve();
	})
}

module.exports = deleteFile;

下期预告

今天的教程就分享到这，缩略图生成，你学会了吗？

到今天为止，我已经将后端的基础功能都讲完了，下一期，我们将转战前端，先教大家搭建登陆页面。