整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文由ScriptEcho平臺(tái)提供技術(shù)支持
項(xiàng)目地址：傳送門
本文展示了如何使用 p5.js 庫(kù)創(chuàng)建交互式的 3D 幾何圖形展示。該技術(shù)廣泛應(yīng)用于藝術(shù)、教育和科學(xué)可視化等領(lǐng)域。
這段代碼利用 p5.js 庫(kù)繪制了六個(gè)不同的 3D 幾何圖形：平面、立方體、圓柱體、圓錐體、環(huán)面和球體。這些圖形隨著時(shí)間的推移旋轉(zhuǎn)和移動(dòng)，呈現(xiàn)出動(dòng)態(tài)的 3D 展示效果。
首先，通過(guò) loadJavascript 函數(shù)異步加載 p5.js 庫(kù)。
let jsUrls=['https://registry.npmmirror.com/p5/1.9.3/files/lib/p5.min.js']
await Promise.all(jsUrls.map((jsUrl)=> loadJavascript(jsUrl)))
接下來(lái)，定義了一個(gè) p5.js 草圖，其中包含 setup 和 draw 函數(shù)。
const sketch=(s)=> {
s.setup=()=> {
s.createCanvas(710, 400, s.WEBGL)
}
s.draw=()=> {
// ...
}
}
在 setup 函數(shù)中，創(chuàng)建了一個(gè) WebGL 畫布，并設(shè)置畫布大小。
s.createCanvas(710, 400, s.WEBGL)
在 draw 函數(shù)中，使用 p5.js 的 3D 形狀函數(shù)繪制了六個(gè)不同的幾何圖形。每個(gè)圖形都應(yīng)用了不同的旋轉(zhuǎn)和移動(dòng)變換，以創(chuàng)建動(dòng)態(tài)的展示效果。
s.plane(70)
s.box(70, 70, 70)
s.cylinder(70, 70)
s.cone(70, 70)
s.torus(70, 20)
s.sphere(70)
最后，創(chuàng)建一個(gè) p5.js 實(shí)例，并將其附加到 HTML 元素上。
new p5(sketch, 'container')
開發(fā)這段代碼的過(guò)程讓我深入了解了 p5.js 庫(kù)在創(chuàng)建交互式 3D 可視化方面的強(qiáng)大功能。該代碼可以進(jìn)一步擴(kuò)展和優(yōu)化，例如：
獲取更多Echos
本文由ScriptEcho平臺(tái)提供技術(shù)支持
項(xiàng)目地址：傳送門
微信搜索ScriptEcho了解更多
像處理庫(kù) (IML) 用于對(duì)圖像執(zhí)行各種處理功能：你可以增加圖像的亮度、添加飽和度或?yàn)V鏡、裁剪和調(diào)整大小，以及更多有價(jià)值的功能，這些功能將幫助你完成幾乎所有事情并將你的網(wǎng)絡(luò)瀏覽器變成 Adob?e Lightroom！
我們?yōu)槊宽?xiàng)重要的圖像處理任務(wù)都提供了庫(kù)，從簡(jiǎn)單的低級(jí)操作（例如濾鏡、亮度和飽和度）到用于裁剪或圖像合成的單一用途庫(kù)。最后，我們進(jìn)入了圖像測(cè)試領(lǐng)域，因?yàn)闆](méi)有可靠的方法來(lái)測(cè)試結(jié)果，任何圖像處理應(yīng)用程序都是不完整的。
NSDT工具推薦： Three.js AI紋理開發(fā)包 - YOLO合成數(shù)據(jù)生成器 - GLTF/GLB在線編輯 - 3D模型格式在線轉(zhuǎn)換 - 可編程3D場(chǎng)景編輯器 - REVIT導(dǎo)出3D模型插件 - 3D模型語(yǔ)義搜索引擎 - Three.js虛擬軸心開發(fā)包 - 3D模型在線減面 - STL模型在線切割
Sharp 是一個(gè)高性能 Node.js 圖像處理庫(kù)，用于調(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)整和壓縮圖像。
用例
我用它來(lái)調(diào)整整個(gè) NFT 集合的大小，大小超過(guò) 80Gb，壓縮后大約為 10Gb。所以，如果你想使用它來(lái)調(diào)整幾張大圖像的大小，那么它是你的最佳選擇 - 你將以最快、最有效的方式完成它。
示例
你可以使用以下命令安裝此庫(kù)：
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);
});Cropper.js 是另一個(gè)流行的圖像處理 JavaScript 庫(kù)。你可以使用它以各種可能的方式裁剪圖像、更改縱橫比、旋轉(zhuǎn)、縮放和處理畫布數(shù)據(jù)。Cropper.js 是裁剪的正確選擇，無(wú)需任何額外功能。
用例
你可以使用其靈活的 API 在你的 Web 應(yīng)用中創(chuàng)建自定義圖像裁剪 UI，讓你的用戶可以將照片調(diào)整為正確的大小和縱橫比。它將更加高效，因?yàn)樗鼛缀醪恍枰魏螙|西，沒(méi)有任何無(wú)用的功能，并且非常適合裁剪！
示例
可以使用以下命令安裝此庫(kù)：
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 演示，單擊要應(yīng)用于圖像的任何屬性并立即查看結(jié)果。
有關(guān)如何將圖像裁剪添加到 React 應(yīng)用的詳細(xì)指南，請(qǐng)查看使用 react-image-crop 的指南。
使用畫布可能有點(diǎn)乏味，尤其是當(dāng)你需要畫布上下文來(lái)執(zhí)行相對(duì)簡(jiǎn)單的事情（例如合并幾張圖像）時(shí)。Merge Images將所有重復(fù)任務(wù)抽象為簡(jiǎn)單的函數(shù)調(diào)用。它是 Canvas API 的包裝器，抽象了其低級(jí)函數(shù)，這使得這項(xiàng)特定任務(wù)變得容易得多。你還可以創(chuàng)建參數(shù)，例如定位、不透明度等。你可以在 GitHub 上的文檔中找到它們。
用例
這是一個(gè)有價(jià)值的庫(kù)，可以幫助完成多項(xiàng)任務(wù)。例如，你可以生成一個(gè) NFT 集合，你可以在其中合并所有組件以獲得一套完整的變體。或者你會(huì)發(fā)現(xiàn)這個(gè)庫(kù)對(duì)個(gè)人使用很有幫助，例如，組合幾張不同的圖像來(lái)生成拼貼畫。
示例
安裝庫(kù)本身：
npm install --save merge-images然后可以使用此代碼生成一個(gè)簡(jiǎn)單的圖像：
//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:在這里，我用它來(lái)合并幾個(gè)組件來(lái)創(chuàng)建最終的變體（這里我使用了背景、角色、喇叭、情感和配件）：
LooksSame 是一個(gè)用于比較圖像的庫(kù)。如果你上傳的兩張圖片是重復(fù)的，該庫(kù)會(huì)通知你。你所要做的就是提供想要比較的圖片的鏈接。LooksSame 嚴(yán)格來(lái)說(shuō)不是一個(gè)圖像處理庫(kù)，但對(duì)測(cè)試很有幫助。
用例
你可以使用這個(gè)庫(kù)并編寫代碼來(lái)實(shí)現(xiàn)自動(dòng)化和循環(huán)周期，以搜索目錄并比較每對(duì)圖像是否存在重復(fù)。此外，你還可以刪除這些重復(fù)項(xiàng)并自動(dòng)執(zhí)行此過(guò)程。如果經(jīng)常使用包含大量圖像的 ML 算法，那么這是一個(gè)很棒的庫(kù)。
示例
要開始比較圖像，只需使用以下命令安裝它：
npm i looks-same在這里，你可以看到如何使用 Jest 測(cè)試這個(gè)庫(kù)：
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 圖像處理程序，它允許你以幾乎所有可能的方式編輯圖像。有了它，你可以反轉(zhuǎn)圖像、添加一些文本、調(diào)整大小、使用像素化、克隆圖像、模糊圖像、反轉(zhuǎn)顏色，以及其他一些很酷的功能，這些功能將提高應(yīng)用程序的圖像處理能力。
用例
使用 Jimp，你可以構(gòu)建 Web 應(yīng)用程序，在其中幾乎可以以任何可能的方式編輯和處理圖像。裁剪、調(diào)整大小、旋轉(zhuǎn)和過(guò)濾功能讓你可以創(chuàng)建自己的照片編輯器并在其上添加界面。
示例
以下是嘗試這個(gè)優(yōu)秀庫(kù)的 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庫(kù) - BimAnt
HTML簡(jiǎn)介
HTML是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言，它是一種超文本標(biāo)記語(yǔ)言，由一套標(biāo)記標(biāo)簽組成，在制作網(wǎng)頁(yè)時(shí)，HTML使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)。
發(fā)展史
HTML：Hyper Text Markup Language超文本標(biāo)記語(yǔ)言
超文本標(biāo)記語(yǔ)言—在1993年6月互聯(lián)網(wǎng)工程工作小組工作案發(fā)布（并非標(biāo)準(zhǔn)）
HTML2.0—1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過(guò)時(shí)。
HTML3.2—1996年1月14日，W3C推薦標(biāo)準(zhǔn)
HTML4.0—1997年12月18日，W3C推薦標(biāo)準(zhǔn)
HTML4.01（微小改進(jìn)）—1999年12月24日，W3C推薦標(biāo)準(zhǔn)，2000年5月15日發(fā)布基本嚴(yán)格的HTML4.01語(yǔ)法，是國(guó)標(biāo)標(biāo)準(zhǔn)化組織和國(guó)際電工委員會(huì)的標(biāo)準(zhǔn)
XHTML1.0—發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來(lái)經(jīng)過(guò)修訂于2002年8月1日重新發(fā)布
XHTML1.1—2001年5月31日發(fā)布
XHTML2.0是W3C的工作草案，由于改動(dòng)過(guò)大，學(xué)習(xí)這個(gè)新技術(shù)的成本過(guò)高而最終胎死腹中，因此，現(xiàn)在最常用的還是XHTML1.0標(biāo)準(zhǔn)。
目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團(tuán)隊(duì)，
2008年1月22日公布HTML5第一份正式草案，
2012年12月17日HTML5規(guī)范正式定稿，
2013年5月6日，HTML5.1正式草案公布。
HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時(shí)也建立了一些新的規(guī)則。這些元素、特性和規(guī)則的建立，提供了許多新的網(wǎng)頁(yè)功能，如使用網(wǎng)頁(yè)實(shí)現(xiàn)動(dòng)態(tài)渲染圖形、圖表、圖像和動(dòng)畫，以及不需要安裝任何插件直接使用網(wǎng)頁(yè)播放視頻等。目前企業(yè)開發(fā)中也在增大使用HTML5的力度
HTML的優(yōu)勢(shì)
h1~h6
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標(biāo)題標(biāo)簽</title> </head> <body> <h1>這是一級(jí)標(biāo)題</h1> <h2>這是二級(jí)標(biāo)題</h2> <h3>這是三級(jí)標(biāo)題</h3> <h4>這是四級(jí)標(biāo)題</h4> <h5>這是五級(jí)標(biāo)題</h5> <h6>這是六級(jí)標(biāo)題</h6> <h7>這是七級(jí)標(biāo)題</h7>效果怎么顯示不出來(lái)呢？？？ <h1>這是一級(jí)標(biāo)題</h1> </body> </html> |
瀏覽器預(yù)覽效果
p標(biāo)簽為段落標(biāo)簽，br標(biāo)簽為換行標(biāo)簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落和換行標(biāo)簽</title> </head> <body> <h1>北京歡迎你</h1> <p>北京歡迎你，<br>為你開天辟地</p> <p>北京歡迎你，<br/>有有勇氣就會(huì)有奇跡</p> </body> </html> |
瀏覽器預(yù)覽效果圖
hr標(biāo)簽為水平線標(biāo)簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平線標(biāo)簽</title> </head> <body> <h1>漂洋過(guò)海來(lái)看你</h1> <hr> <p>為你我用了半年的積蓄，<br>漂洋過(guò)海來(lái)看你</p> <hr/> </body> </html> |
瀏覽器預(yù)覽效果圖
em為斜體標(biāo)簽，strong為字體加粗標(biāo)簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字體樣式標(biāo)簽</title> </head> <body> <h1>漂洋過(guò)海來(lái)看你</h1> <hr> <p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>，<br> <em><strong>漂洋過(guò)海</strong></em>來(lái)看你 </p> <hr/> </body> </html> |
瀏覽器預(yù)覽效果圖
注釋使用：<!--被注釋的內(nèi)容-->
大于號(hào)：> great than的縮寫
小于號(hào)：< less than的縮寫
雙引號(hào)：""
版權(quán)符號(hào)：©
空格：
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注釋和特殊符號(hào)</title> </head> <body> <pre> 注釋使用：<!--被注釋的內(nèi)容--> 大于號(hào)：> great than的縮寫 小于號(hào)：< less than的縮寫 雙引號(hào)："" 版權(quán)符號(hào)：© 空格： </pre> <!-- 我是被注釋的內(nèi)容，我只留給你們看，不會(huì)在頁(yè)面上顯示 --> 5<10>6 <br> "我是被雙引號(hào)引起來(lái)的內(nèi)容"<br> ©自由職業(yè)開發(fā)者公司<br> 我是 測(cè)試 空 格的 </body> </html> |
瀏覽器預(yù)覽效果圖
以上就是HTML的簡(jiǎn)單入門，后續(xù)帶大家更深入的了解HTML
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
