文由ScriptEcho平台提供技术支持

项目地址：传送门

基于 p5.js 的 3D 几何图形展示

应用场景介绍

本文展示了如何使用 p5.js 库创建交互式的 3D 几何图形展示。该技术广泛应用于艺术、教育和科学可视化等领域。

代码基本功能介绍

这段代码利用 p5.js 库绘制了六个不同的 3D 几何图形：平面、立方体、圆柱体、圆锥体、环面和球体。这些图形随着时间的推移旋转和移动，呈现出动态的 3D 展示效果。

功能实现步骤及关键代码分析说明

1. 加载 p5.js 库

首先，通过 loadJavascript 函数异步加载 p5.js 库。

let jsUrls=['https://registry.npmmirror.com/p5/1.9.3/files/lib/p5.min.js']
await Promise.all(jsUrls.map((jsUrl)=> loadJavascript(jsUrl)))

2. 定义 p5.js 草图

接下来，定义了一个 p5.js 草图，其中包含 setup 和 draw 函数。

const sketch=(s)=> {
  s.setup=()=> {
    s.createCanvas(710, 400, s.WEBGL)
  }
  s.draw=()=> {
    // ...
  }
}

3. 设置画布

在 setup 函数中，创建了一个 WebGL 画布，并设置画布大小。

s.createCanvas(710, 400, s.WEBGL)

4. 绘制几何图形

在 draw 函数中，使用 p5.js 的 3D 形状函数绘制了六个不同的几何图形。每个图形都应用了不同的旋转和移动变换，以创建动态的展示效果。

s.plane(70)
s.box(70, 70, 70)
s.cylinder(70, 70)
s.cone(70, 70)
s.torus(70, 20)
s.sphere(70)

5. 创建 p5.js 实例

最后，创建一个 p5.js 实例，并将其附加到 HTML 元素上。

new p5(sketch, 'container')

总结与展望

开发这段代码的过程让我深入了解了 p5.js 库在创建交互式 3D 可视化方面的强大功能。该代码可以进一步扩展和优化，例如：

• 添加用户交互，允许用户旋转或缩放几何图形。
• 使用更复杂的形状和纹理创建更逼真的场景。
• 将代码集成到 Web 应用程序或其他项目中，以增强用户体验。
• 更多组件：

获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址：传送门

微信搜索ScriptEcho了解更多

像处理库 (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

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

发展史

HTML：Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）

HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日，W3C推荐标准

HTML4.0—1997年12月18日，W3C推荐标准

HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5规范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

• 各大浏览器厂商对H5的支持
• 市场的需求
• 跨平台

二、HTML的基本结构

• <html>......</html> HTML文档的开始和结束标记。
• <head>……</head> 头控制标记，不在界面上进行展示，子标签可设置SEO优化的一些内容以及设置网页的编码。
• <title>……</title>：设置浏览器的窗口上标题。
• <body>……</body>：页面可见内容。

三、HTML的基本标签

• 标题标签

h1~h6

• 段落标签和换行标签

p标签为段落标签，br标签为换行标签

• 水平线标签

hr标签为水平线标签

• 字体样式标签

em为斜体标签，strong为字体加粗标签

• 注释和特殊符号

注释使用：<!--被注释的内容-->

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

以上就是HTML的简单入门，后续带大家更深入的了解HTML