DGM.js- 手绘风格形状的无限画布应用

DGM.js: 手绘风格形状的无限画布应用

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、使用免费绘图来创建任何你喜欢的东西

其他特性

Subclassing
触摸设备支持
Node.js支持（和npm包）

如何获取？

既然是开源项目，那么当然可以到Github上获取相关代码，其一直保持更新维护并继续增强其功能，同时官网还提供了非常详细的文档，以及非常丰富的Demo，下面我们将进行截图预览！

Demo

免费绘图

文本填入

相信用过截图工具或者windows绘图工具的都知道什么效果

旋转天体

图像过滤器

HTML5 <video>元素

矩阵变换

以上是选取一些案例进行演示，可能效果不佳，感兴趣的小伙伴可以去官网看看Demo

兼容性

其兼容性相当的不错

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

安装

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模型在线切割

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

在线咨询

上一篇：万字长文入门前端全球化
下一篇：面试官问你前端性能优化时，他想问什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商