DGM.js- 手繪風(fēng)格形狀的無限畫布應(yīng)用

DGM.js: 手繪風(fēng)格形狀的無限畫布應(yīng)用

GM.js是一個(gè)React + TailwindCSS的無限畫布組件庫，它支持：

智能形狀（腳本化、約束、擴(kuò)展屬性）

- 能夠通過腳本控制、具有約束條件和擴(kuò)展屬性的智能形狀，使得用戶可以創(chuàng)建動(dòng)態(tài)和交互式的圖表元素。

無頭組件（React）

- 即使在沒有用戶界面的情況下，也可以使用React框架構(gòu)建的組件，為開發(fā)提供靈活性。

無限畫布

- 提供一個(gè)理論上無限大的畫布，用戶可以自由地?cái)U(kuò)展和創(chuàng)作，不受空間限制。

多頁支持

- 允許用戶在一個(gè)文檔中創(chuàng)建和管理多個(gè)頁面，便于組織和展示大型或復(fù)雜的項(xiàng)目。

手繪風(fēng)格

- 提供類似手繪的外觀和感覺，增加圖表的個(gè)性化和藝術(shù)性。

實(shí)時(shí)協(xié)作

- 支持多個(gè)用戶同時(shí)在線工作，實(shí)時(shí)看到彼此的更改，提高團(tuán)隊(duì)協(xié)作效率。

暗黑模式（自適應(yīng)顏色）

- 根據(jù)用戶的偏好或系統(tǒng)設(shè)置自動(dòng)切換到暗黑模式，同時(shí)顏色能夠自適應(yīng)，保持視覺一致性。

導(dǎo)出為圖像（PNG, SVG）

- 允許用戶將圖表導(dǎo)出為常用的圖像格式，便于分享和打印。

富文本

- 支持富文本編輯，包括不同的字體、大小、顏色和其他文本樣式，豐富圖表內(nèi)容的表現(xiàn)力。

? JSON 導(dǎo)出/導(dǎo)入

- 允許用戶以JSON格式導(dǎo)出和導(dǎo)入圖表數(shù)據(jù)，方便數(shù)據(jù)的存儲(chǔ)、遷移和版本控制。

在DGM.js中，你可以通過組合基本的圖形元素來創(chuàng)建圖表。支持的基本圖形元素有：

矩形、橢圓、文本、圖像、線條、連接器、手繪、高亮顯示、組合

所的這些圖形都是可以被腳本化, 具有擴(kuò)展屬性并且可以設(shè)置約束條件的

它請(qǐng)?jiān)蕿樾螤疃x額外的元數(shù)據(jù)

約束形狀的行為, 例如: 對(duì)齊、尺寸調(diào)整、樣式設(shè)置

腳本允許定義如何繪制或描繪形狀的輪廓。

開源地址：

https://github.com/dgmjs/dgmjs

https://dgmjs.dev/

關(guān)注我，了解更多有趣實(shí)用的開源項(xiàng)目

#開源項(xiàng)目精選#

紹

Fabric.js是一個(gè)簡單但功能強(qiáng)大的Javascript HTML5 canvas庫，F(xiàn)abric在canvas元素之上提供交互式對(duì)象模型，而且Fabric還內(nèi)置SVG-to-canvas（和canvas-to-SVG）解析器，在Github上star數(shù)超過13k+，可見其受歡迎程度！

特性簡介

1、使用Fabric.js，您可以在畫布上創(chuàng)建和填充對(duì)象;對(duì)象就像簡單的幾何形狀

2、或由數(shù)百或數(shù)千條簡單路徑組成的復(fù)雜形狀

3、或者舊風(fēng)格的圖像

4、任何形狀的漸變

5、您可以添加文本并動(dòng)態(tài)操作其大小，對(duì)齊方式，字體系列和其他屬性

6、將圖像過濾器應(yīng)用于圖像

7、有內(nèi)置的動(dòng)畫支持

8、拖動(dòng)圖像，可以將對(duì)象組合在一起，并同時(shí)對(duì)其進(jìn)行操作

9、拖拽方法和方向旋轉(zhuǎn)

10、Canvas可以序列化為JSON或SVG，并可以隨時(shí)恢復(fù)

12、使用免費(fèi)繪圖來創(chuàng)建任何你喜歡的東西

其他特性

Subclassing
觸摸設(shè)備支持
Node.js支持（和npm包）

如何獲??？

既然是開源項(xiàng)目，那么當(dāng)然可以到Github上獲取相關(guān)代碼，其一直保持更新維護(hù)并繼續(xù)增強(qiáng)其功能，同時(shí)官網(wǎng)還提供了非常詳細(xì)的文檔，以及非常豐富的Demo，下面我們將進(jìn)行截圖預(yù)覽！

Demo

免費(fèi)繪圖

文本填入

相信用過截圖工具或者windows繪圖工具的都知道什么效果

旋轉(zhuǎn)天體

圖像過濾器

HTML5 <video>元素

矩陣變換

以上是選取一些案例進(jìn)行演示，可能效果不佳，感興趣的小伙伴可以去官網(wǎng)看看Demo

兼容性

其兼容性相當(dāng)?shù)牟诲e(cuò)

Firefox 2+
Safari 3+
Opera 9.64+
Chrome (all versions)
IE10, IE11, Edge

安裝

npm install fabric --save

文檔一覽

這里就大致看下文檔具備哪些內(nèi)容，由于文檔很詳細(xì)，就不在細(xì)說，而且借助瀏覽器翻譯，看懂是完全沒問題的

最簡單的示例

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <canvas id="canvas" width="300" height="300"></canvas>
 <script src="lib/fabric.js"></script>
 <script>
 var canvas=new fabric.Canvas('canvas');
 var rect=new fabric.Rect({
 top : 100,
 left : 100,
 width : 60,
 height : 70,
 fill : 'red'
 });
 canvas.add(rect);
 </script>
</body>
</html>

自定義構(gòu)建

官方文檔提供了非常人性化的一個(gè)地方就是你可以選擇你需要的部分進(jìn)行構(gòu)建

總結(jié)

總體來說Fabric.js是一個(gè)非常值得使用的JavaScript庫，不管是功能還是兼容性都是非常優(yōu)秀的，而且你可以使用它來構(gòu)建非常強(qiáng)大的BS端應(yīng)用。如在線繪圖等，如果你對(duì)它感興趣，不放嘗試一下，不會(huì)讓你失望！

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

我們?yōu)槊宽?xiàng)重要的圖像處理任務(wù)都提供了庫，從簡單的低級(jí)操作（例如濾鏡、亮度和飽和度）到用于裁剪或圖像合成的單一用途庫。最后，我們進(jìn)入了圖像測(cè)試領(lǐng)域，因?yàn)闆]有可靠的方法來測(cè)試結(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ì)測(cè)試很有幫助。

用例

你可以使用這個(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 測(cè)試這個(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

在線咨詢

上一篇：萬字長文入門前端全球化
下一篇：面試官問你前端性能優(yōu)化時(shí)，他想問什么？

您的項(xiàng)目需求

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

整合營銷服務(wù)商