Nội dung bài viết
Video học lập trình mỗi ngày
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
