[Nodejs] - Resize image trong nodejs sử dụng multer và sharp

Nội dung bài viết

Video học lập trình mỗi ngày

Trước khi viết bài này thì tôi cũng đã thử nghiệm nhiều cách resize  trong nodejs sử dụng nhiều thư viện như ImageMagick and GraphicsMagick, sharp.

const multer = require('multer');

const sharp = require('sharp');Nhưng sau khi sử dụng sharp thi tôi cảm thấy nhanh hơn 4 đến 5 lần khi xử lý resize trong nodejs. Đó thực sự là một thư viên tốt khi dùng resize image in nodejs.

Đầu tiên các ban phải hiểu về multer là gì? Sharp là gi?

Trong github cũng đã nói rõ về hai thư viện này, tôi chỉ nói qua thôi chứ không đi sâu về khái niệm này.

What's Sharp?

The typical use case for this high speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG and WebP images of varying dimensions.
Resizing an image is typically 4x-5x faster than using the quickest ImageMagick and GraphicsMagick settings.
Colour spaces, embedded ICC profiles and alpha transparency channels are all handled correctly. Lanczos resampling ensures quality is not sacrificed for speed.
As well as image resizing, operations such as rotation, extraction, compositing and gamma correction are available.
Most modern 64-bit OS X, Windows and Linux (glibc) systems running Node versions 4, 6, 8 and 10 do not require any additional install or runtime dependencies.

What's multer ?

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.
NOTE: Multer will not process any form which is not multipart (multipart/form-data).


Step 1: install multer and sharp
npm i multer sharp --save

Step 2: Code completed --- app.js

const multer = require('multer');
const sharp = require('sharp');
/* create folder uploads ngang hàng với file app.js */
var upload = multer({
    storage: multer.diskStorage({
        destination: function(req, file, callback) { callback(null, './uploads'); },
        filename: function(req, file, callback) { 
            
                callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)); 
        
            
        }
    }),
    fileFilter: function(req, file, callback) {
        var ext = path.extname(file.originalname)
        if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg') {
            return callback( /*res.end('Only images are allowed')*/ null, false)
        }

        callback(null, true)
    }
})
/* upload.any() sử dụng func này chúng ta có thể upload được nhiều file */
app.post('/upload_image', upload.any(), function(req, res, next) {
    let query = req.body;
    if (!req.body && !req.files) {
        res.json({ success: false });
    } else {
        /* res.json({ success: true, files: req.files }); */
        /* req.files các file upload return về một array, qua đó chúng ta có thể dễ dàng xử lý  */
        /* chú ý: nhớ rename file lại không nữa sinh ra lỗi. ở đay mình rename theo kích thuước mình resize. */
        sharp(req.files[0].path).resize(262, 317).toFile('./uploads/'+ '262x317-'+req.files[0].filename, function(err) {
            if (err) {
                console.error('sharp>>>', err)
            }
            console.log('ok okoko')
        })

    }
})

Các bạn để ý trong code mình đã comment những ý quan trọng,  tất nhiên app.js bạn nên khai báo port vào nhé. File index.html thì cũng đơn giản nên mình ko cần post lên đây. 
Chúc các bạn thành công 

Có thể bạn đã bị missing