介绍
@loaders.gl/images
是一个 npm
包,它提供了处理图片的 API。使用它可以方便的读取、处理和写入各种类型的图片文件。
安装
你可以使用 npm
或者 yarn
安装 @loaders.gl/images
。
npm install @loaders.gl/images
yarn add @loaders.gl/images
使用方法
读取图片
使用 loadImage
函数可以读取一个图片文件,该函数可以自动识别图片类型。
import { loadImage } from '@loaders.gl/images'; const image = await loadImage('images/my-image.jpg'); console.log(image.width, image.height, image.data);
处理图片
使用 decompressImageData
函数可以将压缩过的图片数据还原成原有的像素数据。
-- -------------------- ---- ------- ------ - ---------- ------------------- - ---- --------------------- ----- ----- - ----- ----------------------------------------- ----- --------- - ------------------------------- - ------ ------------ ------- ------------- ------------------------ ------ --- -----------------------展开代码
写入图片
使用 writeImage
函数可以将像素数据写入图片文件。
import { writeImage } from '@loaders.gl/images'; const imageData = new Uint8Array([255, 0, 0, 255, 0, 255, 0, 255, 255, 255, 0, 255, 0, 0, 255, 255]); await writeImage('images/my-new-image.jpg', imageData, { width: 2, height: 2 });
简要说明
loadImage
函数可以自动识别图片类型,并返回Image
对象,该对象包含图片宽度、高度和像素数据。decompressImageData
函数可以将压缩过的图片数据还原为像素数据。writeImage
函数可以将像素数据写入图片文件。
示例代码
-- -------------------- ---- ------- ------ - ---------- ----------- ------------------- - ---- --------------------- ----- -------- ------ - -- -------- ----- ----- - ----- --------------------------------- ------------------------ ------------- ------------ -- ------------------- ----- ------------------- - --- ----------------- ----- ----- ----- ----- ----- ----- ------- ----- --------------------- - ---------------------------------------- - ------ -- ------- -- ------------------------ ------ --- ----------------------------------- -- ----------- ----- --------- - --- ---------------- -- -- ---- -- ---- -- ---- ---- ---- -- ---- -- -- ---- ------ ----- ------------------------------------- ---------- - ------ -- ------- - --- - -------展开代码
总结
@loaders.gl/images
提供了处理图片的 API,可以方便的读取、处理和写入各种类型的图片文件。通过本文介绍的方法,可以快速上手该库,进行更多的图片处理操作。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f202ab7403f2923b035c641