5個最流行的JavaScript圖像處理庫

像處理庫 (IML) 用于對圖像執行各種處理功能：你可以增加圖像的亮度、添加飽和度或濾鏡、裁剪和調整大小，以及更多有價值的功能，這些功能將幫助你完成幾乎所有事情并將你的網絡瀏覽器變成 Adob?e Lightroom！

我們為每項重要的圖像處理任務都提供了庫，從簡單的低級操作（例如濾鏡、亮度和飽和度）到用于裁剪或圖像合成的單一用途庫。最后，我們進入了圖像測試領域，因為沒有可靠的方法來測試結果，任何圖像處理應用程序都是不完整的。

NSDT工具推薦： Three.js AI紋理開發包 - YOLO合成數據生成器 - GLTF/GLB在線編輯 - 3D模型格式在線轉換 - 可編程3D場景編輯器 - REVIT導出3D模型插件 - 3D模型語義搜索引擎 - Three.js虛擬軸心開發包 - 3D模型在線減面 - STL模型在線切割

1、Sharp

Sharp 是一個高性能 Node.js 圖像處理庫，用于調整不同圖像格式（如 JPEG、PNG、WebP、AVIF、SVG 和 TIFF）的大小。此高速 Node.js 模塊的典型用例是將標準格式的大圖像轉換為較小的、適合網絡的圖像。

只有當你想調整大型文件或多種文件的大小時，Sharp 才有用。另一方面，如果你只想調整單個小圖像的大小，那么可能不應該使用它。相反，普通的 HTML 和原生 JavaScript 會更有用。Sharp 充分利用了多個 CPU 核心和 L1/L2/L3 緩存，讓你可以更快地調整和壓縮圖像。

用例

我用它來調整整個 NFT 集合的大小，大小超過 80Gb，壓縮后大約為 10Gb。所以，如果你想使用它來調整幾張大圖像的大小，那么它是你的最佳選擇 - 你將以最快、最有效的方式完成它。

示例

你可以使用以下命令安裝此庫：

npm install sharp

使用 sharp 調整圖像大小的方法如下：

const sharp = require('sharp');
const fs = require('fs');

sharp('yellow.png')
    .rotate(180)
    .resize(200)
    .toBuffer()
    .then( data => {
        fs.writeFileSync('yellow.png', data);
    })
    .catch( err => {
        console.log(err);
    });

2、Cropper.js

Cropper.js 是另一個流行的圖像處理 JavaScript 庫。你可以使用它以各種可能的方式裁剪圖像、更改縱橫比、旋轉、縮放和處理畫布數據。Cropper.js 是裁剪的正確選擇，無需任何額外功能。

用例

你可以使用其靈活的 API 在你的 Web 應用中創建自定義圖像裁剪 UI，讓你的用戶可以將照片調整為正確的大小和縱橫比。它將更加高效，因為它幾乎不需要任何東西，沒有任何無用的功能，并且非常適合裁剪！

示例

可以使用以下命令安裝此庫：

npm install cropperjs

import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

查看 Cropper.js 演示，單擊要應用于圖像的任何屬性并立即查看結果。

有關如何將圖像裁剪添加到 React 應用的詳細指南，請查看使用 react-image-crop 的指南。

3、合并圖像

使用畫布可能有點乏味，尤其是當你需要畫布上下文來執行相對簡單的事情（例如合并幾張圖像）時。Merge Images將所有重復任務抽象為簡單的函數調用。它是 Canvas API 的包裝器，抽象了其低級函數，這使得這項特定任務變得容易得多。你還可以創建參數，例如定位、不透明度等。你可以在 GitHub 上的文檔中找到它們。

用例

這是一個有價值的庫，可以幫助完成多項任務。例如，你可以生成一個 NFT 集合，你可以在其中合并所有組件以獲得一套完整的變體。或者你會發現這個庫對個人使用很有幫助，例如，組合幾張不同的圖像來生成拼貼畫。

示例

安裝庫本身：

npm install --save merge-images

然后可以使用此代碼生成一個簡單的圖像：

//write this inside of your javascript file

import mergeImages from 'merge-images';

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);

//And that would update the img element to show this image:

在這里，我用它來合并幾個組件來創建最終的變體（這里我使用了背景、角色、喇叭、情感和配件）：

4、LooksSame

LooksSame 是一個用于比較圖像的庫。如果你上傳的兩張圖片是重復的，該庫會通知你。你所要做的就是提供想要比較的圖片的鏈接。LooksSame 嚴格來說不是一個圖像處理庫，但對測試很有幫助。

用例

你可以使用這個庫并編寫代碼來實現自動化和循環周期，以搜索目錄并比較每對圖像是否存在重復。此外，你還可以刪除這些重復項并自動執行此過程。如果經常使用包含大量圖像的 ML 算法，那么這是一個很棒的庫。

示例

要開始比較圖像，只需使用以下命令安裝它：

npm i looks-same

在這里，你可以看到如何使用 Jest 測試這個庫：

var looksSame = require('looks-same');

//Parameters can be paths to files or buffer with compressed png image

test('image1 and image2 are the same', async () => {
	expect(looksSame('image1.png', 'image2.png')).toBe(true);
});

//Result will be "image1 and image2 are the same" if they are the same

5、Jimp

Jimp 代表 JavaScript 圖像處理程序，它允許你以幾乎所有可能的方式編輯圖像。有了它，你可以反轉圖像、添加一些文本、調整大小、使用像素化、克隆圖像、模糊圖像、反轉顏色，以及其他一些很酷的功能，這些功能將提高應用程序的圖像處理能力。

用例

使用 Jimp，你可以構建 Web 應用程序，在其中幾乎可以以任何可能的方式編輯和處理圖像。裁剪、調整大小、旋轉和過濾功能讓你可以創建自己的照片編輯器并在其上添加界面。

示例

以下是嘗試這個優秀庫的 JavaScript 代碼。有一個異步函數，你可以在其中看到許多類型的屬性，你可以輕松更改這些屬性。例如添加文本、調整圖像大小、模糊圖像等。要使用其中至少一個，你只需要取消注釋需要的部分，然后程序就可以運行了！

// Import dependencies
const Jimp = require("jimp");

(async function () {

    // Read the image
    const image = await Jimp.read("images/shapes.png"); // <http://www.example.com/path/to/lenna.jpg>

    // // Add text
    //  const font = await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE); // bitmap fonts
    //  image.print(font, 0, 0, 'Hello world!'); // <https://github.com/libgdx/libgdx/wiki/Hiero>

    //  // Resize the image 
    //  // Resize the image to 250 x 250
    //  image.resize(250, 250);

    //  // Resize the height to 250 and scale the width accordingly
    //  image.resize(Jimp.AUTO, 250);

    //  // Resize the width to 250 and scale the height accordingly
    //  image.resize(250, Jimp.AUTO);

    //  // Add a sepia wash to the image
    //  image.sepia();

    //  // Pixelation 
    //  image.pixelate(5);
    //  image.pixelate(5, 50, 50, 190, 200); pixe,x, y, w, h 

    //  // Clone
    //  const image2 = image.clone();

    //  // Blur the image
    //  image.gaussian(1);
    //  image.blur(1);

    //  // Inverts the image
    //  image.invert(); 

    //  // Set the brightness
    //  image.brightness( 0.5 ); // -1 to +1

    //  // Resize the image
    //  image.resize(256, 256);

    //  // Set the quality
    //  image.quality(100);

    //  // Convert to grayscale
    //  image.greyscale();

    // Save the image
    image.write("images/edited-shapes.png"); // writeAsync

})();

PS：不要忘記取消注釋你想要使用的效果，然后保存文件。:)

正如你在此處看到的，我模糊了所有內容并反轉了之前向你展示的圖像的顏色，得到了以下結果：

原文鏈接：Top5圖像處理JS庫 - BimAnt

產繪圖軟件IAuto更新到3.5.7版本啦！新功能上線使得的Iauto繪圖更給力，更加強大！更實用！更絲滑！更新內容包括：

1. 提升并升級離線IA圖數據庫穩定性(允許多個.iax文件同時打開編輯)，支持超過1000張繪圖畫布的快速保存、編輯、預覽、查詢、分組等；

2. 流程模擬節點的func腳本支持自定義的輸入變量控件，數據模擬菜單工具欄支持數據查看器(可查看全部仿真節點的數據列表,包括下載導出仿真數據excel);

3.優化了思維導圖中包括支持圖片旋轉快捷鍵復制粘貼為目標節點子孫節點等功能細節；

平時繪制各類復雜的業務流程圖(或流程模擬)、思維導圖、大型復雜架構圖、大型網絡拓撲圖、信息圖、工藝流程圖、組織結構圖、時序圖、uml/bpmn、項目進度橫道圖、泳道圖、二三維實時折線/散點/曲線曲面圖等等各自示意圖可以輕松搞定！

可以適用于工程設計、產品、教學、科研以及職場上的任何需要流程繪圖場景！無工作行業限制（不管你是從事化工、醫療、建筑、水利、交通、信息、機械、環保、教育等等行業均可使用）！

掌握了IAuto，工作中還要啥Visio或Xmind？無論你的職業是工程師還是設計師、教師或者學生、CEO還是CFO，你都可以用IAuto梳理項目的思維邏輯、拓撲關系、數據模擬預測評估以及項目進度管理安排等等。

IAuto可完全離線使用，內網環境數據更安全，小巧易用！

1.畫完圖可以直接粘貼在word非常方便！

2.自定義圖標素材和連接點、,可滿足各種行業的繪圖需求！

3.支持圖層管理，包括圖層分組、鎖定、鏈接下鉆等等一系列功能！

4.支持構建本地模板庫和獨立.iax文件保存！

5.支持批量快捷連線、布爾運算、快捷插入、智能組件等等！

6.支持復雜流程模擬以及模擬數據導出！

……

IAuto絕對是您職場工作中的好幫手！

架構圖

流程模擬中自定義控件

人物關系

三維實時曲面圖

IAuto可適用任何行業，同時上手簡單！無廣告、無需注冊、無插件，扁平化界面設計使用體驗更加舒適！

單個.iax文件中畫布的層級管理

2.思維導圖支持按層級展開（新功能）

3.支持節點的實時時間曲線；

4.支持圖層管理（包括圖層分組、鏈接、鎖定等一系列功能）

5.泳道圖

6.自定義矢量繪圖畫板

7.組織結構圖

8.大型網絡拓撲結構

9.設備接口、接線圖

10.打印機拓撲

11.產品線框圖

12.數學編程曲線

13.工藝流程

14.時序圖

15.生物化學反應式

16.甘特圖-項目管理

17.導出包含多個畫布圖的html頁（html單頁的LOGO可以根據自己公司情況自定義）；

很強大有木有，同時IAuto中還支持自定義鋼筆、支持KateX方程插入等等！

有了它，基本可以不需要Microsoft Visio、Xmind啦！

關注小編，定時推送新版本和教程動態！

#國產軟件#

果圖（不會截取網頁gif動圖[捂臉]）

另外寫了一個效果拼圖

步驟如下：

一、每一張圖片放在一個div中，然后用另一個div容器包裹了所有的圖片div。

html代碼：

<div class="box6">

</div>

二、圖片正常橫排平均顯示，在鼠標放到一個圖上時還圖片展開顯示全部，其余圖片變窄擠到一起。

css樣式：

/* -----六欄box6圖片手風琴盒子------ */

.box6{

margin: 0 auto;

display: flex;/* 彈性布局盒子 */

width: 1190px;

height: 480px;

justify-content: space-around;/* 彈性布局盒子當中項目位于各行間、前后都留有空白的容器內 */

align-items: center;/* 彈性布局當中盒子位置垂直居中 */

}

在線咨詢

上一篇：使用HTML添加表格3（間距與顏色）-零基礎自學網頁制作
下一篇：css美化文字做法詳解總結

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。