1. Các sản phẩm
  2.   Hình ảnh
  3.   JavaScript
  4.   Jimp
 
  

Các hoạt động xử lý hình ảnh phức tạp qua API JavaScript 

Thư viện JavaScript mã nguồn mở để thực hiện các tác vụ tạo và thao tác hình ảnh nâng cao như thay đổi kích thước hình ảnh, làm mờ một hình ảnh sang một hình ảnh khác, làm mờ một hình ảnh, chia tỷ lệ hình ảnh và nhiều thao tác khác. 

Jimp - Javascript Image Manipulation Program là một thư viện mã nguồn mở Node.js cung cấp cho các nhà phát triển phần mềm khả năng thực hiện các hoạt động xử lý hình ảnh phức tạp bên trong các ứng dụng JavaScript của riêng họ. Nó được viết hoàn toàn bằng JavaScript cho Node, không có bất kỳ phụ thuộc bên ngoài hoặc bản địa nào.

Thư viện rất hữu ích để phát triển bất kỳ loại ứng dụng xử lý hình ảnh nâng cao nào và hoàn toàn miễn phí, do đó cung cấp cho các nhà phát triển một giải pháp hiệu quả về chi phí và dễ sử dụng. Thư viện bao gồm một số tính năng nâng cao liên quan đến việc tạo và thao tác hình ảnh như thay đổi kích thước hình ảnh, nâng cao chất lượng hình ảnh, làm mờ hình ảnh sang hình ảnh khác, làm mờ hình ảnh, chia tỷ lệ hình ảnh, áp dụng hiệu ứng hòa sắc cho hình ảnh, lật hình ảnh, đảo ngược màu sắc của hình ảnh, xoay hình ảnh, in văn bản lên hình ảnh và nhiều hơn thế nữa.

Thư viện bao gồm hỗ trợ cho một số định dạng hình ảnh nâng cao như BMP, GIF, JPEG, PNG, TIFF và nhiều định dạng khác. Ngoài ra còn có một số plugin bổ sung có thể được sử dụng cho một số chức năng bổ sung như plugin vòng kết nối có thể được sử dụng để tạo vòng tròn từ hình ảnh và plugin tạo bóng tạo bóng trên hình ảnh. Có sẵn plugin hiệu ứng mắt cá và plugin ngưỡng.

Previous Next

Bắt đầu với Jimp

Bạn có thể cài đặt thư viện Jimp bằng cách đưa ra một lệnh đơn giản trong Node. Sử dụng lệnh sau. 

Cài đặt Jimp qua NPM

npm install jimp

Thay đổi kích thước hình ảnh bằng cách sử dụng Thư viện JavaScript

Thư viện mã nguồn mở Jimp đã bao gồm chức năng thay đổi kích thước hình ảnh bên trong các ứng dụng JavaScript của riêng chúng. Trước tiên, bạn cần cung cấp một hình ảnh và một đường dẫn đầy đủ đến nó. Sau đó, bạn có thể cung cấp chiều cao hoặc chiều rộng và thư viện Jimp sẽ chia tỷ lệ hình ảnh cho phù hợp. Sau khi hài lòng, bạn có thể lưu hình ảnh tại nơi bạn chọn. Bạn cũng có thể dễ dàng chia tỷ lệ hình ảnh bằng cách cung cấp chiều rộng và chiều cao tùy chỉnh giữ nguyên tỷ lệ khung hình.

Hình ảnh kích thước JavaScript

import jimp from 'jimp';
async function main() {
	// Read the image.
	const image = await jimp.read('test/image.png');
	// Resize the image to width 150 and auto height.
	await image.resize(150, jimp.AUTO);
	// Save and overwrite the image
	await image.writeAsync('test/image.png');
}
main();

Lật, chia tỷ lệ hoặc xoay hình ảnh qua JavaScript

Thư viện mã nguồn mở Jimp cũng đã cung cấp chức năng cho một số tính năng quan trọng liên quan đến thao tác hình ảnh. Nó cho phép nhà phát triển lật cũng như chia tỷ lệ hình ảnh chỉ với một vài dòng mã JavaScript. Chức năng lật sẽ lật hình ảnh theo chiều ngang hoặc chiều dọc. Cài đặt mặc định là lật hình ảnh theo chiều ngang. Chức năng xoay sẽ xoay hình ảnh theo chiều kim đồng hồ và kích thước của hình ảnh sẽ được giữ nguyên.

Quay hình ảnh qua JavaScript API

import jimp from 'jimp';
async function main() {
  const image = await jimp.read('test/image.png');
  image.rotate(90);
}
main();

Áp dụng Gaussian & Trộn màu trên hình ảnh

Hiệu ứng làm mờ Gaussian là một hiệu ứng được sử dụng rộng rãi trong phần mềm đồ họa, thường là để giảm nhiễu hình ảnh và giảm chi tiết. Thư viện mã nguồn mở Jimp cho phép các lập trình viên phần mềm áp dụng hiệu ứng mờ Gaussian thực sự cho hình ảnh bên trong ứng dụng của riêng họ. Xin lưu ý rằng quá trình xử lý của nó tương đối chậm so với các chức năng thư viện khác. Thư viện cũng hỗ trợ tính năng trộn màu và nó trộn các màu theo các giá trị thành phần RGB của chúng và số lượng là độ mờ của màu phủ.

Áp dụng Gaussian cho Hình ảnh bên trong Ứng dụng JavaScript

import jimp from 'jimp';
async function main() {
  const image = await jimp.read('test/image.png');
  image.gaussian(15);
}
main();
 Tiếng Việt