Hướng dẫn blob image nodejs - hình ảnh blob nodejs
Nội dung bài viết Xử lý hình ảnh với Node giờ đây dễ dàng hơn bao giờ hết. Có rất nhiều thư viện hỗ trợ chúng ta như sharp, cloudinary... Nhưng trong bài biết này, tôi sẽ giới thiệu cho bạn một thư viện mới, cung cấp mạnh mẽ những API như Resizing, Crop... Chắc hẳn các bạn còn nhớ "Resize image trong nodejs sử dụng multer và sharp" thì các bạn cũng sẽ dễ hình dung hơn về các thư viện xử lý hình ảnh của nodejs."Resize image trong nodejs sử dụng
multer và sharp" thì các bạn cũng sẽ dễ hình dung hơn về các thư viện xử lý hình ảnh của nodejs. Nếu một trang web hay một ứng dụng của bạn dùng nhiều tư liệu bằng hình ảnh, hay cung cấp cho người dùng upload hình ảnh lên, thì việc xử lý mỗi hình ảnh đó là một công việc được ưu tiên hàng đầu trong việc phát triển ứng dụng. Việc xử lý tối ưu hoá hình ảnh cho kích thước tệp tối thiểu nhưng phải đảm bảo chất lượng hình ảnh đó cũng là một việc phức tạp nếu chúng ta tự làm và nghiên cứu. Với việc sử dụng thư viện Jimp, bạn có thể thay đổi kích thước và cắt hình ảnh, chuyển đổi chúng sang định dạng hình ảnh phù hợp với nhu cầu của bạn và áp dụng các bộ lọc và hiệu ứng. Trong hướng dẫn này, chúng tôi sẽ thảo luận về cách thư viện hoạt động và mô tả một số trường hợp sử dụng phổ biến cho thao tác hình ảnh khi sử dụng thue viện Jimp. Lưu ý ở đây Jimp chỉ giúp chúng ta xử lý hình ảnh. Nếu một trong số các bạn chưa biết cách upload images với nodejs thì vui lòng tham khảo bài viết "Example upload files using multer in nodejs, express js" để có thể upload files lên host một cách dễ dàng.Nếu một trong số các bạn chưa biết
cách upload images với nodejs thì vui lòng tham khảo bài viết "Example upload files using multer in nodejs, express js" để có thể upload files lên host một cách dễ dàng. Trước khi bạn bắt đầu làm việc với thư viện, chúng tôi muốn các bạn phải đảm bảo rằng nó hỗ trợ các định dạng bạn dự định đưa vào ứng dụng của mình. Định dạng được hỗ trợ bao gồm: Jimp hỗ trợ callback, ngoài ra cũng hỗ trợ Promise một cách dễ dàng. Và trong bài viết này, chúng tôi sẽ sử dụng demo với Promise Tips: Series toàn tập callback - Promise - Async/Await trong JavascriptSeries toàn tập callback - Promise - Async/Await trong Javascript Ví dụ cơ bản: Jimp.read('http://www.example.com/path/to/lenna.jpg') .then(image => { // Do stuff with the image. }) .catch(err => { // Handle an exception. }); Chúng ta có thể cung cấp cho imp.read một url hoặc một file location trong system của bạn. Và bây giờ chúng ta thử làm demo về những tính năng sau đây. Hy vọng, bạn sẽ thích và sử dụng chúng ngay hoặc sau này nếu bạn cần. Resizing and cropping imagesResizingSyntax: resize( w, h[, mode] ) Example: const Jimp = require('jimp'); async function resize() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); // Resize the image to width 150 and heigth 150. await image.resize(150, 150); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_150x150.png`); } resize(); Images gốc HÌnh ảnh sau khi đã Resized CropSyntax: crop( x, y, w, h) Example: async function crop() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); await image.crop(500, 500, 150, 150); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_crop_150x150.png`); } crop() Hình ảnh sau khi đã Cropped Modifying image shape and styleRotateSyntax: rotate( deg[, mode] ); Example: async function rotate() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); await image.rotate(45); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_rotate_150x150.png`); } rotate() Output FlipSyntax: image.flip( horz, vert ) Example: @jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif0 Hình ảnh sau khi xử lý OpacitySyntax: @jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif1 Example: @jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif2 Hình ảnh sau khi xử lý Opacity Xử lý hiệu ứng cho imagesGrayscale@jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif3 Example: @jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif4 Output: Blur@jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif5 Example: @jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif6 Output: Add text cho images sử dụng nodejsImage overlay@jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif7 Example: @jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif8 Output: Text overlayExample: @jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif9 Output: Tìm hiểu thêm về JimpTrên đây là những demo có thể giúp các bạn hình dung được cách xử lý hình ảnh trên nodejs. Ngoài ra bạn có thể tìm hiểu kỹ hơn về Jimp qua GITHUBnodejs. Ngoài ra bạn có thể tìm hiểu kỹ hơn về Jimp qua GITHUB Ref: blog.logrocket.com |