整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
GM.js是一個React + TailwindCSS的無限畫布組件庫，它支持：
智能形狀（腳本化、約束、擴展屬性）
- 能夠通過腳本控制、具有約束條件和擴展屬性的智能形狀，使得用戶可以創建動態和交互式的圖表元素。
無頭組件（React）
- 即使在沒有用戶界面的情況下，也可以使用React框架構建的組件，為開發提供靈活性。
無限畫布
- 提供一個理論上無限大的畫布，用戶可以自由地擴展和創作，不受空間限制。
多頁支持
- 允許用戶在一個文檔中創建和管理多個頁面，便于組織和展示大型或復雜的項目。
手繪風格
- 提供類似手繪的外觀和感覺，增加圖表的個性化和藝術性。
實時協作
- 支持多個用戶同時在線工作，實時看到彼此的更改，提高團隊協作效率。
暗黑模式（自適應顏色）
- 根據用戶的偏好或系統設置自動切換到暗黑模式，同時顏色能夠自適應，保持視覺一致性。
導出為圖像（PNG, SVG）
- 允許用戶將圖表導出為常用的圖像格式，便于分享和打印。
富文本
- 支持富文本編輯，包括不同的字體、大小、顏色和其他文本樣式，豐富圖表內容的表現力。
? JSON 導出/導入
- 允許用戶以JSON格式導出和導入圖表數據，方便數據的存儲、遷移和版本控制。
在DGM.js中，你可以通過組合基本的圖形元素來創建圖表。支持的基本圖形元素有：
矩形、橢圓、文本、圖像、線條、連接器、手繪、高亮顯示、組合
所的這些圖形都是可以被腳本化, 具有擴展屬性并且可以設置約束條件的
它請允為形狀定義額外的元數據
約束形狀的行為, 例如: 對齊、尺寸調整、樣式設置
腳本允許定義如何繪制或描繪形狀的輪廓。
開源地址：
https://github.com/dgmjs/dgmjs
https://dgmjs.dev/
關注我，了解更多有趣實用的開源項目
#開源項目精選#
Fabric.js是一個簡單但功能強大的Javascript HTML5 canvas庫，Fabric在canvas元素之上提供交互式對象模型，而且Fabric還內置SVG-to-canvas（和canvas-to-SVG）解析器，在Github上star數超過13k+，可見其受歡迎程度！
1、使用Fabric.js，您可以在畫布上創建和填充對象;對象就像簡單的幾何形狀
2、或由數百或數千條簡單路徑組成的復雜形狀
3、或者舊風格的圖像
4、任何形狀的漸變
5、您可以添加文本并動態操作其大小，對齊方式，字體系列和其他屬性
6、將圖像過濾器應用于圖像
7、有內置的動畫支持
8、拖動圖像，可以將對象組合在一起，并同時對其進行操作
9、拖拽方法和方向旋轉
10、Canvas可以序列化為JSON或SVG，并可以隨時恢復
12、使用免費繪圖來創建任何你喜歡的東西
既然是開源項目，那么當然可以到Github上獲取相關代碼，其一直保持更新維護并繼續增強其功能，同時官網還提供了非常詳細的文檔，以及非常豐富的Demo，下面我們將進行截圖預覽！
相信用過截圖工具或者windows繪圖工具的都知道什么效果
以上是選取一些案例進行演示，可能效果不佳，感興趣的小伙伴可以去官網看看Demo
其兼容性相當的不錯
npm install fabric --save
這里就大致看下文檔具備哪些內容，由于文檔很詳細，就不在細說，而且借助瀏覽器翻譯，看懂是完全沒問題的
<!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>
官方文檔提供了非常人性化的一個地方就是你可以選擇你需要的部分進行構建
總體來說Fabric.js是一個非常值得使用的JavaScript庫，不管是功能還是兼容性都是非常優秀的，而且你可以使用它來構建非常強大的BS端應用。如在線繪圖等，如果你對它感興趣，不放嘗試一下，不會讓你失望！
像處理庫 (IML) 用于對圖像執行各種處理功能：你可以增加圖像的亮度、添加飽和度或濾鏡、裁剪和調整大小，以及更多有價值的功能，這些功能將幫助你完成幾乎所有事情并將你的網絡瀏覽器變成 Adob?e Lightroom！
我們為每項重要的圖像處理任務都提供了庫，從簡單的低級操作（例如濾鏡、亮度和飽和度）到用于裁剪或圖像合成的單一用途庫。最后，我們進入了圖像測試領域，因為沒有可靠的方法來測試結果，任何圖像處理應用程序都是不完整的。
NSDT工具推薦： Three.js AI紋理開發包 - YOLO合成數據生成器 - GLTF/GLB在線編輯 - 3D模型格式在線轉換 - 可編程3D場景編輯器 - REVIT導出3D模型插件 - 3D模型語義搜索引擎 - Three.js虛擬軸心開發包 - 3D模型在線減面 - STL模型在線切割
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);
});Cropper.js 是另一個流行的圖像處理 JavaScript 庫。你可以使用它以各種可能的方式裁剪圖像、更改縱橫比、旋轉、縮放和處理畫布數據。Cropper.js 是裁剪的正確選擇，無需任何額外功能。
用例
你可以使用其靈活的 API 在你的 Web 應用中創建自定義圖像裁剪 UI，讓你的用戶可以將照片調整為正確的大小和縱橫比。它將更加高效，因為它幾乎不需要任何東西，沒有任何無用的功能，并且非常適合裁剪！
示例
可以使用以下命令安裝此庫：
npm install cropperjsimport 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 的指南。
使用畫布可能有點乏味，尤其是當你需要畫布上下文來執行相對簡單的事情（例如合并幾張圖像）時。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:在這里，我用它來合并幾個組件來創建最終的變體（這里我使用了背景、角色、喇叭、情感和配件）：
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
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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
