一款實(shí)用的圖像處理 JavaScript 庫(kù) —— jimp.js。上一篇分享的高斯模糊 blurify.js 功能比較單一，和 Jimp.js 相比就是弟弟。

https://github.com/jimp-dev/jimp

Jimp.js 是一個(gè)純 JavaScript 編寫的圖像處理庫(kù)，沒有任何本地依賴，它允許在瀏覽器端和 Node.js 環(huán)境中對(duì)圖像進(jìn)行操作。這個(gè)庫(kù)提供了一系列的功能，包括圖像的讀取、寫入、創(chuàng)建、修改和轉(zhuǎn)換等。Jimp.js 支持多種圖像格式，如 JPEG、PNG、BMP 等，并且可以處理圖像的像素?cái)?shù)據(jù)，實(shí)現(xiàn)圖像的縮放、裁剪、旋轉(zhuǎn)、顏色轉(zhuǎn)換等操作。

Jimp.js 的主要特點(diǎn)包括：

• ? 跨平臺(tái)：可以在瀏覽器和 Node.js 中使用，不需要依賴于任何外部的圖像處理庫(kù)或服務(wù)器端的支持。

• ? 易用性：提供了簡(jiǎn)潔的 API，使得開發(fā)者可以輕松地進(jìn)行圖像處理任務(wù)。

• ? 強(qiáng)大的圖像處理功能：支持圖像的常見操作，如調(diào)整大小、裁剪、旋轉(zhuǎn)、顏色變換等。

• ? 像素級(jí)操作：可以直接操作圖像的像素?cái)?shù)據(jù)，實(shí)現(xiàn)更復(fù)雜的圖像處理效果。

• ? 異步處理：使用異步操作，這意味著它不會(huì)阻塞主線程，可以提高應(yīng)用程序的性能。

如何安裝 Jimp.js

Jimp.js 只能用于有限的圖像格式。開始使用庫(kù)之前，需要確認(rèn)應(yīng)用中圖像的格式。支持的格式：bmp，gif，jpeg，png，tiff。

老生常談，Jimp.js 支持包管理 npm 和 yarn 安裝，也支持 CDN 安裝。

npm install jimp

基本使用

在你的 JavaScript 代碼中引入Jimp，并開始使用它：

const Jimp = require('jimp')

Jimp.read('./images/1.jpg').then(image => {
  image.resize(1200, 1000)
    .quality(70)
    .write('./dist/1_to.jpg')
}).catch(err => {
  console.log(err)
})

調(diào)用 read 方法讀取指定路徑的圖像，返回一個(gè) Promise 對(duì)象。在回調(diào)函數(shù)中，我們對(duì)圖像對(duì)象進(jìn)行操作。

• ? image.resize(1200, 1000) 調(diào)用 resize 方法來改變圖片的尺寸到1200x1000像素。這個(gè)方法接受兩個(gè)參數(shù)，分別是新的寬度和高度。

• ? .quality(70) 設(shè)置輸出圖片的質(zhì)量。這里的參數(shù) 70 表示輸出圖片的質(zhì)量為 70%，這可以影響圖片的文件大小和視覺質(zhì)量。

• ? .write('./dist/1_to.jpg') 最后，調(diào)用 write 方法將處理后的圖片保存到指定的路徑。這個(gè)方法同樣返回一個(gè) Promise 對(duì)象，用于處理文件寫入操作。

添加水印

// 添加水印
async function addWatermark(text, imageSrc, destPath) {
  const image = await Jimp.read(imageSrc);
  // 加載字體，默認(rèn) Jimp 不支持中文字體，F(xiàn)ONT_SANS_32_WHITE 是預(yù)設(shè)的字體樣式。
  const font = await Jimp.loadFont(Jimp.FONT_SANS_32_WHITE);
  image.print(font, 10, 10, text)
       .write(destPath);
}

addWatermark('@Lee', './images/image.jpg', './dist/image_watermark.jpg')

注意：Jimp 默認(rèn)是不支持中文字體的，需要下載字體文件 ttf 或 otf 格式的中文字體文件，通過 loadFont 引入。

• ? Jimp.loadFont(Jimp.FONT_SANS_32_WHITE) 使用的是Jimp庫(kù)提供的內(nèi)置字體Jimp.FONT_SANS_32_BLACK，它代表一種32像素大小的無襯線字體，顏色為白色。

• ? image.print(font, 10, 10, text) 這個(gè)方法接受四個(gè)參數(shù)：字體對(duì)象font，文本開始打印的x坐標(biāo)（這里為10），y坐標(biāo)（這里為10），以及要添加的文本內(nèi)容text。

  
  

應(yīng)用場(chǎng)景

Jimp.js 的應(yīng)用場(chǎng)景廣泛，幾乎涵蓋了所有需要圖片處理的場(chǎng)合：

• ? 網(wǎng)站性能優(yōu)化：通過調(diào)整圖片大小和壓縮，加快網(wǎng)站加載速度。

• ? 自動(dòng)化圖片生成：在社交媒體或廣告中，自動(dòng)生成符合規(guī)格的圖片。

• ? 圖像分析：提取圖片的一些基本信息，如顏色分布，輔助進(jìn)行更深入的圖像處理或分析。

總結(jié)

Jimp.js無疑是前端開發(fā)者的一大利器。它不僅功能強(qiáng)大、使用方便，而且完全開源。對(duì)于任何需要在瀏覽器或服務(wù)器端處理圖片的場(chǎng)景，Jimp.js 都能提供強(qiáng)有力的支持。無論你是前端新手還是資深開發(fā)者，都應(yīng)該嘗試將 Jimp.js 加入你的開發(fā)工具箱。