NodeJS thay đổi kích thước hình ảnh

Chà, một trong những điều tôi nhận thấy sau khi chuyển sang ghost là không có bất kỳ công cụ thay đổi kích thước hình ảnh nào OOTB. Tính năng này dự kiến ​​sẽ được phát hành trong tương lai. Trong khi chúng ta chờ đợi, tôi đã tự mình nghĩ ra một giải pháp nhanh chóng và tiết kiệm

Ý kiến

Phát triển API lấy kích thước của hình ảnh nhất định làm tham số và trả về hình ảnh đã thay đổi kích thước để phản hồi

Để có được các thành phần, một chuyến đi đến npm là theo thứ tự. Sau khi tìm kiếm một lúc, tôi tình cờ thấy một gói hàng, tên là Sharp. Gói này có vẻ khá phổ biến, với hơn 1. 2 triệu lượt tải xuống hàng tuần (đến nay)

Mẹo chuyên nghiệp. tìm kiếm các gói đang được sử dụng nhiều và số lượt tải xuống là thước đo tốt để đánh giá mức độ phổ biến của một gói trong cộng đồng. Nguy cơ gói không được hỗ trợ sẽ thấp hơn nếu mức độ sử dụng của cộng đồng cao hơn

Sharp giúp chuyển đổi hình ảnh lớn thành hình ảnh nhỏ hơn, thân thiện với web ở các định dạng khác nhau như PNG, JPG,  AVIF, WebP, v.v.

Bây giờ gói thay đổi kích thước đã được quyết định, đã đến lúc thực hiện

sự cố công nghệ

• Nút. js. công nghệ cơ sở
• Thể hiện. một trong những nút phổ biến nhất. js, được sử dụng để phát triển API
• đa năng. nó là một phần mềm trung gian, được sử dụng để tải lên các tệp
• Nhọn. chuyển đổi / thay đổi kích thước hình ảnh

Đúng vậy, bây giờ chúng ta đã quyết định tất cả các thành phần, đã đến lúc bắt đầu viết mã

Kéo trong các gói cần thiết

const express = require('express')
const app = express();
const multer = require('multer')
const sharp = require('sharp')

Cài đặt cơ bản

const port = 3000
const maxSize= 5000000 //5MB
const storage = multer.memoryStorage()

Hải cảng. là số cổng mà API sẽ được triển khai bằng express/node

kích thước tối đa. Kích thước tối đa của hình ảnh được cung cấp cho API, tôi đặt giới hạn là 5MB tại đây

kho. chúng tôi đang sử dụng bộ lưu trữ bộ nhớ ở đây chứ không phải bộ lưu trữ đĩa [được sử dụng khi có ý định tải tệp lên hệ thống tệp của máy chủ]. Đây là một tham số multer

Thiết lập phần mềm trung gian multer

const upload = multer({ 
    storage: storage,
    limits: {fileSize: maxSize},
    fileFilter: (req, file, cb)=>{
        let regex = new RegExp( '([a-zA-Z0-9\s_\\.\-:])+(.jpeg|.jpg|.png)$')
        if(regex.test(file.originalname.toLowerCase()))
            return cb(null,true)
        else
        cb('error: please provide images only to this service', false)
    }
}).single('image')

Đây là phần mềm trung gian multer cho express. Chúng ta có thể chỉ định các tham số kiểm soát ở đây, chẳng hạn như

• Bộ lưu trữ [được định cấu hình trước đó là memoryStorage]
• Áp dụng giới hạn kích thước tệp
• Các loại tệp được phép [phương thức tệpFilter]
• Thuộc tính "single" ở cuối xác định xem một tệp có được phép xử lý hay không, tệp này được lưu trữ trong req. tập tin

Ghi chú. Nếu bạn có ý định sử dụng một biểu mẫu trên giao diện người dùng thì hãy đảm bảo giá trị được truyền dưới dạng tham số cho một phương thức phải giống hệt như thuộc tính tên của biểu mẫu HTML

Lộ trình 'bài viết'

app.post('/upload', upload, async (req, res, next) => {
    
    let width, height = 25
    try
    {
        if(req.body.width !== undefined)
            width = parseInt(req.body.width)
        if(req.body.height !== undefined)
            height = parseInt(req.body.height)

        if(req.file !== undefined){
            const buffer = await sharp(req.file.buffer).resize({ width: width, height: height}).jpeg().toBuffer()
            res.setHeader('content-type', 'image/jpeg')
            res.send(buffer)
        }
        else{
            res.send('No file selected')
        }
    }
    catch(error){
        next(error)
    }

  })

This route, named /upload, is developed to process the requests with the multipart/form-data enctype. Putting it differently, use enctype multipart/form-data when your form includes , this is a multer requirement btw.

Trình xử lý tuyến đường này mong đợi phần sau trong phần thân yêu cầu

• hình ảnh. tập tin hình ảnh
• bề rộng. thông số chiều rộng để thay đổi kích thước
• Chiều cao. tham số chiều cao để thay đổi kích thước

Sau khi xử lý các giá trị mặc định, khởi tạo và lỗi, dòng sau đây là nơi chúng tôi đưa vào sắc nét để giúp thay đổi kích thước hình ảnh đã cho

const buffer = await sharp(req.file.buffer).resize({ width: width, height: height}).jpeg().toBuffer()

• yêu cầu. tập tin. đệm. Bộ đệm tập tin trong bộ nhớ được bàn giao cho sharp. Điều này được cung cấp cho chúng tôi trong phần phụ trợ bởi multer
• Phương pháp thay đổi kích thước và chuyển đổi. phương pháp thay đổi kích thước đang giúp thay đổi kích thước hình ảnh đã cho dựa trên các tham số chiều rộng và chiều cao được cung cấp. Kết quả sau đó được chuyển đổi thành jpeg được trả về dưới dạng bộ đệm [được sử dụng trong đối tượng phản hồi của API]

Cuối cùng, chúng ta cần đặt tiêu đề phản hồi trước khi trả lại bộ đệm hình ảnh đã thay đổi kích thước cho người gọi

res.setHeader('content-type', 'image/jpeg')
res.send(buffer)

Kích hoạt máy chủ

app.listen(port, () => console.log(`App listening to port ${port}`));

Điều này đảm bảo máy chủ được khởi động và đang lắng nghe trên cổng đã cho [3000] cho các kết nối đến

Ghi chú. bạn có thể truy cập vào mã hoàn chỉnh trên Github của tôi

Kiểm tra API

Bây giờ chúng ta đã hoàn thành việc mã hóa, đã đến lúc kiểm tra đơn vị

• thực hiện ứng dụng. ứng dụng $ gật đầu. js
• Mở Postman và cung cấp các thông số như trong ảnh chụp màn hình bên dưới

Bớt tư tưởng

Lập trình là niềm vui. Biến tình huống thành cơ hội, tôi chắc chắn rằng có nhiều cách để thay đổi kích thước hình ảnh mà không cần phải phát triển công cụ của riêng bạn, tôi cũng không cố ám chỉ rằng đoạn mã này là tốt nhất và bao gồm tất cả các tình huống. Không có sẵn bộ thay đổi kích thước OOTB đã cho tôi ý tưởng viết một blog về việc tự mình phát triển một cái đơn giản. Điều này đã giúp ích cho nội dung blog và tôi hy vọng nó sẽ giúp được ai đó đang gặp khó khăn trong việc xử lý bất kỳ thành phần nào được mô tả trong bài viết này. Tôi cũng hy vọng điều này sẽ thúc đẩy những người khác không bận tâm về điều gì đó đã được thực hiện trước đây, chỉ thực hiện nó như một dự án sở thích và tận hưởng quá trình phát triển một thứ gì đó hữu hình

Bạn có thể thay đổi kích thước hình ảnh trong JavaScript không?

Nodejs có tốt cho việc xử lý hình ảnh không?