使用sharp

Sharp是一款快速高效的Node.js圖片處理庫(kù)，支持圖片格式轉(zhuǎn)換、尺寸調(diào)整、壓縮、裁剪、旋轉(zhuǎn)、水印等功能。以下是使用Sharp庫(kù)的基本步驟：

1. 安裝Sharp庫(kù)

安裝Sharp庫(kù)可以使用npm命令：

npm install sharp

2. 調(diào)用Sharp庫(kù)

在代碼中調(diào)用Sharp庫(kù)，可以先引入Sharp庫(kù)：

const sharp = require('sharp');

3. 圖片格式轉(zhuǎn)換

利用Sharp庫(kù)，可以將圖片格式轉(zhuǎn)換為其它格式，例如將JPEG圖片轉(zhuǎn)換為PNG圖片：

sharp('input.jpg')
  .toFormat('png')
  .toFile('output.png', (err, info) => {
   // 處理錯(cuò)誤或完成后的回調(diào)函數(shù)
});

4. 尺寸調(diào)整

利用Sharp庫(kù)，可以調(diào)整圖片的尺寸，例如將圖片寬度調(diào)整為800像素：

sharp('input.png')
  .resize(800, null)
  .toFile('output.png', (err, info) => {
    // 處理錯(cuò)誤或完成后的回調(diào)函數(shù)
  });

5. 壓縮

利用Sharp庫(kù)，可以壓縮圖片文件大小，例如將圖片文件壓縮為50%：

sharp('input.png')
  .jpeg({ quality: 50 })
  .toFile('output.png', (err, info) => {
    // 處理錯(cuò)誤或完成后的回調(diào)函數(shù)
  });

6. 裁剪

利用Sharp庫(kù)，可以裁剪圖片，例如將圖片裁剪為400x400像素：

sharp('input.png')
  .resize(800, 800)
  .extract({ width: 400, height: 400, left: 200, top: 200 })
  .toFile('output.png', (err, info) => {
    // 處理錯(cuò)誤或完成后的回調(diào)函數(shù)
  });

7. 旋轉(zhuǎn)

利用Sharp庫(kù)，可以旋轉(zhuǎn)圖片，例如將圖片逆時(shí)針旋轉(zhuǎn)90度：

sharp('input.png')
  .rotate(-90)
  .toFile('output.png', (err, info) => {
    // 處理錯(cuò)誤或完成后的回調(diào)函數(shù)
  });

8. 添加水印

利用Sharp庫(kù)，可以在圖片上添加水印，例如將文字“Hello World”添加到圖片左上角：

sharp('input.png')
  .resize(800, null)
  .overlayWith(Buffer.from('Hello World'), { gravity: 'northwest' })
  .toFile('output.png', (err, info) => {
    // 處理錯(cuò)誤或完成后的回調(diào)函數(shù)
  });

以上是使用Sharp庫(kù)的基本步驟，具體使用可以根據(jù)具體需求進(jìn)行調(diào)整。

使用jimp

Jimp 是一個(gè)用于 Node.js 的圖片處理庫(kù)，它支持讀取、操作和保存多種格式的圖片，比如 PNG、JPEG、BMP、GIF 等等。以下是使用 Jimp 的基本步驟：

1. 安裝 Jimp

通過(guò) npm 命令安裝 Jimp：

npm install jimp

2. 引入 Jimp

在代碼中引入 Jimp 模塊：

const Jimp = require('jimp');

3. 讀取圖片

使用 Jimp.read() 方法讀取圖片，并在回調(diào)函數(shù)中處理圖片：

Jimp.read('path/to/image.png', (err, image) => {
  if (err) throw err;
  // 對(duì)圖片進(jìn)行操作
});

4. 操作圖片

Jimp 支持多種操作，比如調(diào)整大小、裁剪、旋轉(zhuǎn)、縮放、濾鏡等等。以下是一些常見(jiàn)的操作示例：

// 調(diào)整大小
image.resize(200, 200)

// 裁剪
image.crop(10, 10, 100, 100)

// 旋轉(zhuǎn)
image.rotate(45)

// 縮放
image.scale(0.5)

// 濾鏡
image.greyscale().blur(5)

5. 保存圖片

使用 Jimp.write() 方法保存圖片：

image.write('path/to/new/image.png', (err) => {
  if (err) throw err;
  console.log('Image saved.');
});

####完整代碼示例
const Jimp = require('jimp');

Jimp.read('path/to/image.png', (err, image) => {
  if (err) throw err;
  
  image.resize(200, 200)
       .crop(10, 10, 100, 100)
       .rotate(45)
       .scale(0.5)
       .greyscale()
       .blur(5)
       .write('path/to/new/image.png', (err) => {
         if (err) throw err;
         console.log('Image saved.');
       });
});

使用webconvert

webpconvert 是一個(gè)基于 Node.js 的處理 WebP 圖像的工具。使用它能夠?qū)?JPEG、PNG、GIF 等圖片格式轉(zhuǎn)換為 WebP 圖片格式，以實(shí)現(xiàn)更好的圖片壓縮并提高網(wǎng)站性能。以下是使用 webpconvert 的方法：

1. 安裝 Node.js 和 npm（如果你還沒(méi)有安裝的話）。

2. 打開(kāi)終端或命令行界面，使用 npm 安裝 webpconvert：

npm install -g webp-convert

3. 轉(zhuǎn)換一張圖片格式為 WebP 格式的命令行語(yǔ)法如下：

npm install -g webp-convert

例如，在當(dāng)前目錄下有一張名為 "example.png" 的 PNG 圖片，將它轉(zhuǎn)換為 WebP 格式并輸出到 "example.webp"，可以使用以下命令：

webpconvert example.png example.webp

4. 根據(jù)需要，可以添加一些選項(xiàng)來(lái)調(diào)整轉(zhuǎn)換的質(zhì)量和大小，例如：

- 調(diào)整輸出圖片質(zhì)量等級(jí)：使用 "-q" 或 "--quality" 選項(xiàng)，并指定一個(gè)介于 0 到 100 之間的數(shù)字。

webpconvert example.png example.webp -q 80

- 調(diào)整輸出圖片大?。菏褂?"-r" 或 "--resize" 選項(xiàng)，并指定一個(gè)百分比或像素值。

webpconvert example.png example.webp -r 50%

- 轉(zhuǎn)換圖片并自動(dòng)替換原文件（需使用 "-o" 或 "--overwrite" 選項(xiàng)）。

webpconvert example.png -o

更多選項(xiàng)和用法可以通過(guò)運(yùn)行 "webpconvert --help" 命令來(lái)查看。

使用Cropper.js

Cropper.js 是一款基于 HTML5 canvas 元素的圖片裁剪工具，可以讓用戶自由選擇圖片的大小和位置。Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境，能夠在服務(wù)器端運(yùn)行 JavaScript 代碼。在 Node.js 中使用 Cropper.js 需要先安裝相關(guān)依賴和配置服務(wù)器。

安裝 Cropper.js

可以使用 npm 命令來(lái)安裝 Cropper.js：

npm install cropperjs --save

安裝完成后，就可以在項(xiàng)目中引入 Cropper.js 了：

const Cropper = require('cropperjs');

配置服務(wù)器

為了在 Node.js 中使用 Cropper.js，需要配置服務(wù)器，讓服務(wù)器能夠訪問(wèn)圖片文件?？梢允褂?express 框架來(lái)創(chuàng)建服務(wù)器：

const express = require('express');
const app = express();

app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server started on port 3000.');
});

上面的代碼創(chuàng)建了一個(gè)名為 app 的 express 應(yīng)用，將項(xiàng)目根目錄中的 public 文件夾設(shè)置為靜態(tài)文件夾，用于存放圖片文件。服務(wù)器啟動(dòng)后，可以在瀏覽器中訪問(wèn) ```http://localhost:3000``` 查看是否配置成功。

使用 Cropper.js

下面是使用 Cropper.js 對(duì)圖片進(jìn)行裁剪的示例代碼：

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.post('/crop', (req, res) => {
  const cropper = new Cropper(req.body.src, {
    aspectRatio: 1 / 1,
    crop(event) {
      console.log(event.detail.x);
      console.log(event.detail.y);
      console.log(event.detail.width);
      console.log(event.detail.height);
    },
  });

  cropper.getCroppedCanvas().toBlob((blob) => {
    res.send(blob);
  });
});

app.listen(3000, () => {
  console.log('Server started on port 3000.');
});

這段代碼創(chuàng)建了一個(gè)名為 cropper 的 Cropper 實(shí)例，用于對(duì)圖片進(jìn)行裁剪。其中，```req.body.src``` 表示要裁剪的圖片路徑，```aspectRatio``` 表示裁剪框的長(zhǎng)寬比，```crop``` 是一個(gè)回調(diào)函數(shù)，用于在裁剪框發(fā)生變化時(shí)輸出裁剪框的坐標(biāo)和大小。

在裁剪完成后，使用 ```getCroppedCanvas()``` 方法將裁剪后的圖片輸出為一個(gè) canvas 元素，再使用 ```toBlob()``` 方法將 canvas 元素轉(zhuǎn)換成 Blob 對(duì)象，最后將 Blob 對(duì)象通過(guò) HTTP 響應(yīng)發(fā)送給客戶端。

注意事項(xiàng)

在使用 Cropper.js 時(shí)需要注意以下幾點(diǎn)：

1. 圖片必須先加載完成后才能進(jìn)行裁剪，否則會(huì)出現(xiàn)錯(cuò)誤；

2. 裁剪后的圖片會(huì)通過(guò) HTTP 響應(yīng)發(fā)送給客戶端，需要設(shè)置正確的 MIME 類型；

3. Cropper.js 依賴 HTML5 的 canvas 元素，不支持 IE8 及以下的瀏覽器。

總結(jié)

到此這篇關(guān)于nodejs處理圖片的幾種方法的文章就介紹到這了,更多相關(guān)nodejs處理圖片方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論