Hướng dẫn xử lý hình ảnh sử dụng node và Jimp

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.

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.

Installation jimp

npm install --save jimp

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/jpeg
@jimp/png
@jimp/bmp
@jimp/tiff
@jimp/gif

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 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 images

Resizing

Syntax:

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 

Crop

Syntax:

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 style

Rotate

Syntax:

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 

Flip

Syntax:

image.flip( horz, vert )

Example:

async function flip() {
  // Read the image.
  const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg');
  await image.flip(true, false);
  // Save and overwrite the image
  await image.writeAsync(`test/${Date.now()}_flip_150x150.png`);
  console.log("flipped")
}
flip()

Hình ảnh sau khi xử lý 

Opacity

Syntax:

opacity( f );

Example:

async function opacity() {
  // Read the image.
  const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg');
  await image.opacity(.5);
  // Save and overwrite the image
  await image.writeAsync(`test/${Date.now()}_opacity_150x150.png`);
}

Hình ảnh sau khi xử lý Opacity 

Xử lý hiệu ứng cho images

Grayscale

greyscale();

Example:

async function greyscale() {
  // Read the image.
  const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg');
  await image.greyscale();
  // Save and overwrite the image
  await image.writeAsync(`test/${Date.now()}_greyscale_150x150.png`);
}
greyscale()

Output: 

Blur

blur(r) // fast blur the image by r pixels

Example:

async function blur() {
  // Read the image.
  const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg');
  await image.blur(20);
  // Save and overwrite the image
  await image.writeAsync(`test/${Date.now()}_blur_150x150.png`);
}
blur()

Output: 

Add text cho images sử dụng nodejs

Image overlay

composite( src, x, y, [{ mode, opacitySource, opacityDest }] ); 

Example:

async function waterMark(waterMarkImage) {
  let  watermark = await Jimp.read(waterMarkImage);
  watermark = watermark.resize(300,300);
  const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg');
 watermark = await watermark
  image.composite(watermark, 0, 0, {
    mode: Jimp.BLEND_SOURCE_OVER,
    opacityDest: 1,
    opacitySource: 0.5
  })
  await image.writeAsync(`test/${Date.now()}_waterMark_150x150.png`);
}
waterMark('https://destatic.blob.core.windows.net/images/nodejs-logo.png');

Output: 

Text overlay

Example:

async function textOverlay() {
  const font = await Jimp.loadFont(Jimp.FONT_SANS_32_BLACK);
  const image = await Jimp.read(1000, 1000, 0x0000ffff);

  image.print(font, 10, 10, 'Hello World!');
}

textOverlay();

Output: 

Tìm hiểu thêm về Jimp

Trê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 GITHUB

Ref: blog.logrocket.com