5個(gè)最流行的JavaScript圖像處理庫

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

我們?yōu)槊宽?xiàng)重要的圖像處理任務(wù)都提供了庫，從簡單的低級(jí)操作（例如濾鏡、亮度和飽和度）到用于裁剪或圖像合成的單一用途庫。最后，我們進(jìn)入了圖像測試領(lǐng)域，因?yàn)闆]有可靠的方法來測試結(jié)果，任何圖像處理應(yīng)用程序都是不完整的。

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

1、Sharp

Sharp 是一個(gè)高性能 Node.js 圖像處理庫，用于調(diào)整不同圖像格式（如 JPEG、PNG、WebP、AVIF、SVG 和 TIFF）的大小。此高速 Node.js 模塊的典型用例是將標(biāo)準(zhǔn)格式的大圖像轉(zhuǎn)換為較小的、適合網(wǎng)絡(luò)的圖像。

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

用例

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

示例

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

npm install sharp

使用 sharp 調(diào)整圖像大小的方法如下：

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 是另一個(gè)流行的圖像處理 JavaScript 庫。你可以使用它以各種可能的方式裁剪圖像、更改縱橫比、旋轉(zhuǎn)、縮放和處理畫布數(shù)據(jù)。Cropper.js 是裁剪的正確選擇，無需任何額外功能。

用例

你可以使用其靈活的 API 在你的 Web 應(yīng)用中創(chuàng)建自定義圖像裁剪 UI，讓你的用戶可以將照片調(diào)整為正確的大小和縱橫比。它將更加高效，因?yàn)樗鼛缀醪恍枰魏螙|西，沒有任何無用的功能，并且非常適合裁剪！

示例

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

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 演示，單擊要應(yīng)用于圖像的任何屬性并立即查看結(jié)果。

有關(guān)如何將圖像裁剪添加到 React 應(yīng)用的詳細(xì)指南，請(qǐng)查看使用 react-image-crop 的指南。

3、合并圖像

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

用例

這是一個(gè)有價(jià)值的庫，可以幫助完成多項(xiàng)任務(wù)。例如，你可以生成一個(gè) NFT 集合，你可以在其中合并所有組件以獲得一套完整的變體。或者你會(huì)發(fā)現(xiàn)這個(gè)庫對(duì)個(gè)人使用很有幫助，例如，組合幾張不同的圖像來生成拼貼畫。

示例

安裝庫本身：

npm install --save merge-images

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

//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:

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

4、LooksSame

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

用例

你可以使用這個(gè)庫并編寫代碼來實(shí)現(xiàn)自動(dòng)化和循環(huán)周期，以搜索目錄并比較每對(duì)圖像是否存在重復(fù)。此外，你還可以刪除這些重復(fù)項(xiàng)并自動(dòng)執(zhí)行此過程。如果經(jīng)常使用包含大量圖像的 ML 算法，那么這是一個(gè)很棒的庫。

示例

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

npm i looks-same

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

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 圖像處理程序，它允許你以幾乎所有可能的方式編輯圖像。有了它，你可以反轉(zhuǎn)圖像、添加一些文本、調(diào)整大小、使用像素化、克隆圖像、模糊圖像、反轉(zhuǎn)顏色，以及其他一些很酷的功能，這些功能將提高應(yīng)用程序的圖像處理能力。

用例

使用 Jimp，你可以構(gòu)建 Web 應(yīng)用程序，在其中幾乎可以以任何可能的方式編輯和處理圖像。裁剪、調(diào)整大小、旋轉(zhuǎn)和過濾功能讓你可以創(chuàng)建自己的照片編輯器并在其上添加界面。

示例

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

// 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：不要忘記取消注釋你想要使用的效果，然后保存文件。:)

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

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

產(chǎn)繪圖軟件IAuto更新到3.5.7版本啦！新功能上線使得的Iauto繪圖更給力，更加強(qiáng)大！更實(shí)用！更絲滑！更新內(nèi)容包括：

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

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

3.優(yōu)化了思維導(dǎo)圖中包括支持圖片旋轉(zhuǎn)快捷鍵復(fù)制粘貼為目標(biāo)節(jié)點(diǎn)子孫節(jié)點(diǎn)等功能細(xì)節(jié)；

平時(shí)繪制各類復(fù)雜的業(yè)務(wù)流程圖(或流程模擬)、思維導(dǎo)圖、大型復(fù)雜架構(gòu)圖、大型網(wǎng)絡(luò)拓?fù)鋱D、信息圖、工藝流程圖、組織結(jié)構(gòu)圖、時(shí)序圖、uml/bpmn、項(xiàng)目進(jìn)度橫道圖、泳道圖、二三維實(shí)時(shí)折線/散點(diǎn)/曲線曲面圖等等各自示意圖可以輕松搞定！

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

掌握了IAuto，工作中還要啥Visio或Xmind？無論你的職業(yè)是工程師還是設(shè)計(jì)師、教師或者學(xué)生、CEO還是CFO，你都可以用IAuto梳理項(xiàng)目的思維邏輯、拓?fù)潢P(guān)系、數(shù)據(jù)模擬預(yù)測評(píng)估以及項(xiàng)目進(jìn)度管理安排等等。

IAuto可完全離線使用，內(nèi)網(wǎng)環(huán)境數(shù)據(jù)更安全，小巧易用！

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

2.自定義圖標(biāo)素材和連接點(diǎn)、,可滿足各種行業(yè)的繪圖需求！

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

4.支持構(gòu)建本地模板庫和獨(dú)立.iax文件保存！

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

6.支持復(fù)雜流程模擬以及模擬數(shù)據(jù)導(dǎo)出！

……

IAuto絕對(duì)是您職場工作中的好幫手！

架構(gòu)圖

流程模擬中自定義控件

人物關(guān)系

三維實(shí)時(shí)曲面圖

IAuto可適用任何行業(yè)，同時(shí)上手簡單！無廣告、無需注冊(cè)、無插件，扁平化界面設(shè)計(jì)使用體驗(yàn)更加舒適！

單個(gè).iax文件中畫布的層級(jí)管理

2.思維導(dǎo)圖支持按層級(jí)展開（新功能）

3.支持節(jié)點(diǎn)的實(shí)時(shí)時(shí)間曲線；

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

5.泳道圖

6.自定義矢量繪圖畫板

7.組織結(jié)構(gòu)圖

8.大型網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)

9.設(shè)備接口、接線圖

10.打印機(jī)拓?fù)?/p>

11.產(chǎn)品線框圖

12.數(shù)學(xué)編程曲線

13.工藝流程

14.時(shí)序圖

15.生物化學(xué)反應(yīng)式

16.甘特圖-項(xiàng)目管理

17.導(dǎo)出包含多個(gè)畫布圖的html頁（html單頁的LOGO可以根據(jù)自己公司情況自定義）；

很強(qiáng)大有木有，同時(shí)IAuto中還支持自定義鋼筆、支持KateX方程插入等等！

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

關(guān)注小編，定時(shí)推送新版本和教程動(dòng)態(tài)！

#國產(chǎn)軟件#

果圖（不會(huì)截取網(wǎng)頁gif動(dòng)圖[捂臉]）

另外寫了一個(gè)效果拼圖

步驟如下：

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

html代碼：

<div class="box6">

</div>

二、圖片正常橫排平均顯示，在鼠標(biāo)放到一個(gè)圖上時(shí)還圖片展開顯示全部，其余圖片變窄擠到一起。

css樣式：

/* -----六欄box6圖片手風(fēng)琴盒子------ */

.box6{

margin: 0 auto;

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

width: 1190px;

height: 480px;

justify-content: space-around;/* 彈性布局盒子當(dāng)中項(xiàng)目位于各行間、前后都留有空白的容器內(nèi) */

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

}

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商