Hướng dẫn nodejs resize image - nodejs thay đổi kích thước hình ảnh
Mô tảResize ảnh là 1 task rất phổ biến trong một dự án phần mềm. Ví dụ như khi hiển thị trên mobile ta cần những bức ảnh nhỏ hơn để tối ưu kích thước dung lượng request trả về và tăng tốc độ giúp cải thiện trải nghiệm người dùng. Hoặc bức ảnh đó bạn dùng vào nhiều mục đích (làm thumbnail 400x300, avatar 50x50 hay full screen 1920x1080). Show Bạn sẽ cần bức ảnh với nhiều kích thước khác nhau. Mình tìm kiếm khá nhiều và tìm được 1 giải pháp khá hay. Đó chính là sự kết hợp giữa Amazon S3, AWS Lambda và Amazon API Gateway(bạn có thể tham khảo từ bài viết này: https://aws.amazon.com/blogs/compute/resize-images-on-the-fly-with-amazon-s3-aws-lambda-and-amazon-api-gateway/). Vì hiện nay các bức ảnh chủ yếu được lưu trữ trên Amazon S3 và để giảm tải việc xử lý cho server. Nhưng mình đọc mãi bài viết đó không làm được . Về cơ bản thì follow của nó như này: . Về cơ bản thì follow của nó như này:
Ở bài này mình sẽ code một ứng dụng để có thể resize ảnh với Node.js sử dụng thư viện Sharp (https://github.com/lovell/sharp). Bài tiếp theo, mình sẽ tạo AWS Lambda function và config hệ thống giống như bài viết hướng dẫn trên. Chúng ta sẽ đi từng bước một nhé! Cài đặt project với ExpressĐầu tiên, tạo một folder và khởi tạo nó với Node.js:
Tạo 2 file:
Cài đặt 0:
Tạo server Express cơ bản
Mình vừa khởi tạo server runtime đơn giản với Express Xử lý request, response ảnhBước tiếp theo, chúng ta sẽ tạo một request 1 trả về một bức ảnh.Bạn cần có một file image để test và copy vào folder của project. Ở đây mình có 1 bức ảnh logo Node.js, bạn cũng có thể dùng nó: https://github.com/oNguyenVanThinh/resize-image/blob/master/images/normal/nodejs.png
Và bạn đã có 1 request có type là 1 trả về bức ảnh logo Node.js: http://localhost:3000Resize ảnh sử dụng thư viện SharpGiờ thì cần sử dụng Sharp để resize bức ảnh đó và trả về với kích thước (width, height) với định dạng format (png hay jpg).
Giờ thì vào đường link này, chúng ta sẽ có 1 bức ảnh với kích thước là 50x50: http://localhost:3000?format=png&width=50&height=50 Kết quảMình đã thử resize bức ảnh logo Node.js bằng một công cụ online đó là http://www.picresize.com/ với kích thước 50x50 và được 1 bức ảnh dung lượng 2.8kb. Nhưng với ứng dụng của chúng ta thì bức ảnh resize 50x50 chỉ có kích thước 2.5kb. Thật tuyết vời. Và tốc độ xử lý cũng rất nhanh gần như sau khi request thì nó trả về tức thì. Một vài lưu ýBạn có thể đọc bài viết này để hiểu thêm về 3: https://medium.freecodecamp.org/node-js-streams-everything-you-need-to-know-c9141306be93Một bài viết rất hay đấy! Tóm lượcMình mong bài viết này sẽ hữu cho các bạn đang tìm hiểu về resize ảnh với Node.js. Và chúc các bạn code vui vẻ Source code: https://github.com/oNguyenVanThinh/resize-image Source code: https://github.com/oNguyenVanThinh/resize-imageBài viết tham khảo từ: https://malcoded.com/posts/nodejs-image-resize-express-sharp |