libvips

libvips是一个图像处理库,涉及conversion和resample两大功能。conversion包括裁剪、嵌入和组合等,而resample用于图像缩放。库中包含rot、rotate、resize等函数,resize在缩小时使用vips_shrink和vips_reduce,放大时使用vips_affine。thumbnail结合了conversion和resample功能,提供拉伸和裁剪。注意vips_area_unref的使用防止内存泄漏,而embed和gravity用于填充图像。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文档链接

函数类别说明

一般我们用到这个库时都是想转换图像,但是转化图像又分两种情况,按照文档中使用的单词:

conversion — convert images in some way: change band format, change header, insert, extract, join

resample — resample images in various ways

通俗但不准确的说就是前者只是像素的值的位置的交换,而后者则是会做一些根据现有的像素计算新的像素值(插值一类)的事情。
所以,
裁剪,嵌入,组合 就属于前者;
而对图像缩放就属于后者。
另外两类会用到的函数:

command

# 列出所有commands
$ vips -l
# 列出某个command 的参数,只要输入空参数就可以了,如:
$ vips thumbnail 
# 注意参数类型有两种,other arguments 的使用要这样:
vips thumbnail 1.jpg 2.jpg 100 --height=200 --size=force
# 这些参数是可以和C 的函数对应起来的
# 使用 vips thumbnail 列出可以用参数时,同时会看的default value和allow value
# 数组参数
$ vips affine k2.jpg x.jpg "2 0 0 1"
#  []
vips affine k2.jpg x.jpg[Q=90,strip] "2 0 0 1"
# 用.v 文件存储中间结果
$ vips invert input.jpg t1.v
$ vips affine t1.v output.jpg "2 0 0 1"
$ rm t1.v
# 一些extra option,比如 --vips-progress 可以显示处理的进度
vips thumbnail 1.jpg 3.jpg 500 --height=800  --crop=
### 使用 libvips 的 WebAssembly 实现 (wasm-vips) 进行前端集成 在前端项目中使用 `libvips` 可通过其基于 WebAssembly 的实现 `wasm-vips` 来完成。以下是关于如何在前端项目中集成和使用该库的具体说明: #### 1. 安装 wasm-vips 可以通过 npm 或 yarn 将 `wasm-vips` 添加到项目的依赖项中。由于这是一个针对浏览器环境的解决方案,因此可以直接安装并引入。 ```bash npm install @wa/wasm-vips ``` 或者使用 Yarn: ```bash yarn add @wa/wasm-vips ``` 此操作会在 `package.json` 文件中的 `dependencies` 部分记录该模块[^1]。 #### 2. 初始化与加载 WebAssembly 模块 `wasm-vips` 是一个编译为 WebAssembly 的库,这意味着它需要先初始化 Wasm 模块才能正常工作。以下是一个简单的初始化示例: ```javascript import { initialize } from '@wa/wasm-vips'; // 加载 WebAssembly 并返回 Promise initialize().then(() => { console.log('WASM module initialized successfully'); }).catch((error) => { console.error('Failed to load WASM:', error); }); ``` 上述代码展示了如何异步加载 WebAssembly 模块,并在其准备好后执行后续逻辑。 #### 3. 图像处理 API 调用 一旦 WebAssembly 模块成功加载,就可以调用 `wasm-vips` 提供的各种图像处理函数。例如,读取图片、调整大小以及保存结果等功能都可以轻松实现。 下面展示了一个完整的例子——将一张本地图片缩小至指定宽度并导出为 JPEG 格式的数据 URI: ```javascript import { initialize, Image } from '@wa/wasm-vips'; async function resizeImage(inputPath, outputPath, newWidth) { await initialize(); // 确保 WASM 已经加载完毕 const image = Image.new_from_file(inputPath); // 从文件创建图像对象 const resized = image.resize(newWidth / image.width()); // 缩放比例计算 resized.write_to_buffer('.jpg', {}, (err, buffer) => { if (!err && buffer instanceof ArrayBuffer) { const dataURI = 'data:image/jpeg;base64,' + Buffer.from(buffer).toString('base64'); console.log(dataURI); // 输出 Base64 数据 URI } }); } resizeImage('./example.jpg', './output.jpg', 800); ``` 这段代码实现了基本的图像缩放功能,并利用了 `write_to_buffer` 方法生成数据 URI。 #### 4. 替代方案 sharp 如果目标平台不仅限于纯前端(如 Node.js),还可以考虑更成熟的替代品 `sharp`。Sharp 同样集成了 `libvips` 库,在性能上表现优异,尤其适用于服务器端渲染场景下的批量图像转换需求[^4]。 对于仅需运行在客户端的情况,则继续沿用 `wasm-vips` 更加合适;而对于混合架构的应用程序来说,可能需要分别部署不同的工具链来满足各自的需求。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值