---
# System prepended metadata

title: 利用Sharp做後端圖片處理
tags: [Nodejs, MongoDB]

---

# 利用Sharp做後端圖片處理
###### tags: `MongoDB` `Nodejs`

[Sharp](https://github.com/lovell/sharp)

網頁中顯示使用者圖片的地方往往會因為設計限制而建議使用一定大小的圖片來達到最好的效果，如果使用者傳進來的圖片太大張或長寬比例很怪的話可以使用sharp來先做處理再存圖片

## 搭配multer
multer的storage有disk和memory，如果要直接存的話可以直接用disk，但這裡要用sharp做修改，所以先存在memory中會比較好

```javascript=
// userController.js
// 
//***other storage***
const multer = require('multer')
const sharp = require('sharp')
const multerStorage = multer.memoryStorage() //memory很間單 這樣就OK了
//***other storage***
```
之後建立一個resize的middleware
sharp後面能接很多設定，可以去官網看看
```javascript=
// userController.js
// 
//***other storage***
exports.resizeUserPhoto = (req, res, next) => {
  if(!req.file) return next()
  req.file.filename = `user-${req.user.id}-${Date.now()}.jpeg`
  sharp(req.file.buffer)
    .resize(500, 500)
    .toFormat('jpeg')
    .jpeg({ quality: 90 })
    .toFile(`public/img/users/${req.file.filename}`)
}
//***other storage***
```
之後就把這個middleware放到路由裡就可以在傳圖片的時候做處理了
```javascript=
// userRouter.js
router.patch('/updateme', userController.uploadUserPhoto, userController.resizeUserPhoto, userController.updateMe)
```
