拓冰网站定制 
如何用 Bun.Image 调整图片尺寸并转换为 WebP 格式【免费下载链接】bunIncredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one项目地址: https://gitcode.com/GitHub_Trending/bu/bun假设你手里有一批 JPEG 或 PNG 原图需要统一缩放到一个目标尺寸并以 WebP 格式输出。Bun 内置的Bun.Image提供了一条可链调用的原生图片处理管线从文件构造输入、链式调用resize()等变换、指定输出格式最后await一个终结方法完成实际工作。它基于 libjpeg-turbo、spng、libwebp 和 SIMD 几何内核零 npm 依赖也不需要编译原生插件——只要环境中有 Bun 运行时即可直接使用。本文围绕「缩放 转 WebP」这一条路径展开如何构造输入、如何设置缩放参数、如何编码写出以及如何验证结果。构造图片输入Bun.Image的构造函数接受文件路径、字节数据或Blob包括Bun.file()与Bun.s3.file()。Blob#image()是new Bun.Image(blob)的简写new Bun.Image(./photo.jpg); // 文件路径 new Bun.Image(buffer); // Buffer / ArrayBuffer / TypedArray new Bun.Image(Bun.file(photo.jpg)); // BunFile惰性读取离线程执行 Bun.file(photo.jpg).image(); // 与上一行等价 Bun.s3.file(bucket/photo.jpg).image(); // S3File两点需要注意格式由字节内容嗅探Bun 会忽略文件扩展名和Content-Type所以源图扩展名写错也不影响解码路径字符串就是文件系统路径。不要把用户可控的字符串直接传给构造函数——这等于一个任意文件读取原语。不可信输入应先读入Buffer并用你自己的校验逻辑再传字节。构造函数还可以带第二个options参数用于防御解压炸弹和控制 EXIF 处理new Bun.Image(input, { // 宽×高超过该值时拒绝。在读完文件头后、分配像素缓冲前检查。 // 默认值与 Sharp 一致约 268 MP maxPixels: 4096 * 4096, // 在任何其他操作之前应用 JPEG 的 EXIF Orientation。默认true autoOrient: true, });如果你只想先确认输入图的实际尺寸不需要解码像素数据可以直接读元信息const { width, height, format } await new Bun.Image(input).metadata(); // 文档示例{ width: 1920, height: 1080, format: jpeg }上行的输出是源文档给出的示例结果实际数值取决于你的图片。用 resize 设置目标尺寸resize的调用形态决定缩放行为img.resize(800); // 宽 800保持宽高比 img.resize(800, 600); // 精确 800×600拉伸 img.resize(800, 600, { fit: inside }); // 完整放入 800×600 框内 img.resize(800, 600, { withoutEnlargement: true });// 不放大 img.resize(800, 600, { filter: mitchell }); // 指定重采样核fit的两个取值fit行为fill默认拉伸到精确的width × heightinside保持宽高比结果完整落在框内filter选择重采样核默认是lanczos3文档称其为照片类图像合适的默认选择。其他可选项包括lanczos2略柔和、振铃少、mitchell平滑渐变、cubic、mks2013/mks2021Facebook/Instagram 使用的 Magic Kernel Sharp、bilinear/linear快、偏软、box适合大整数倍缩小、nearest像素画/硬边缘。另外当源图是 JPEG 且目标尺寸不超过源尺寸的一半时解码会直接跳到最接近的 M/8 IDCT 缩放级别也就是说从 2400 万像素的照片生成缩略图时不会先materialize全分辨率缓冲。编码为 WebP 并写出文件链式调用格式方法即设置编码目标不指定任何格式方法时Bun 会沿用源格式img.webp({ quality: 80 }); // 有损 WebP img.webp({ lossless: true }); // 无损 WebP管线在await一个终结方法之前不做任何工作。可用的终结方法await img.bytes(); // Uint8Array await img.buffer(); // Buffer await img.blob(); // Blob.type 设为输出 MIME await img.toBase64(); // 字符串 await img.dataurl(); // data:image/...;base64,… await img.write(out.webp); // 返回写入的字节数 await img.write(Bun.s3.file(bucket/out.webp));把前面两步串起来就是本文标题对应的最短路径——从photo.jpg生成一张不超过 400×400 的 WebP 缩略图await Bun.file(photo.jpg) .image() .resize(400, 400, { fit: inside }) .webp({ quality: 80 }) .write(thumb.webp);两个补充事实write()返回写入的字节数可以直接用来确认输出非空如果你没有链任何格式方法而目标是一个路径字符串扩展名会决定输出格式.jpg/.png/.webp/.heic/.avif。也就是说Bun.file(photo.jpg).image().resize(400, 400).write(thumb.webp)同样会输出 WebP。验证结果第一次await终结方法之后img.width和img.height反映的是输出尺寸此前它们的值是-1可以直接断言缩放后的宽高用metadata()重新读取输出文件不解码像素即可拿到最终的width、height、format。平台差异与不支持项WebP 属于在所有平台都走静态链接编解码器libwebp的格式Linux、macOS、Windows 上的编码输出逐字节一致所以「转 WebP」这一步在三个平台上行为相同。需要注意的是源图格式的平台限制TIFF、HEIC、AVIF 的解码依赖系统后端Linux 上不可用终结对ERR_IMAGE_FORMAT_UNSUPPORTED报错error.code ERR_IMAGE_FORMAT_UNSUPPORTED。如果你的图片来源可能是 HEIC且可能运行在 Linux 上就应对该错误码做分支处理例如先转成 JPEG/PNG 再进入管线。文档给出的分支模式如下const out await img .avif({ quality: 50 }) .bytes() .catch(e { if (e.code ERR_IMAGE_FORMAT_UNSUPPORTED) return img.webp({ quality: 80 }).bytes(); throw e; });此外传入TypedArray/ArrayBuffer时不要在终结方法 pending 期间修改它——解码离线程执行并借用这块内存Bun 会拒绝SharedArrayBuffer和可调整大小的 buffer需要时用buf.slice()传一个固定视图。完整 API 细节rotate/flip、modulate、占位图、Bun.serve集成等见 Bun.Image 文档。【免费下载链接】bunIncredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one项目地址: https://gitcode.com/GitHub_Trending/bu/bun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何用 Bun.Image 调整图片尺寸并转换为 WebP 格式
如何用 Bun.Image 调整图片尺寸并转换为 WebP 格式【免费下载链接】bunIncredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one项目地址: https://gitcode.com/GitHub_Trending/bu/bun假设你手里有一批 JPEG 或 PNG 原图需要统一缩放到一个目标尺寸并以 WebP 格式输出。Bun 内置的Bun.Image提供了一条可链调用的原生图片处理管线从文件构造输入、链式调用resize()等变换、指定输出格式最后await一个终结方法完成实际工作。它基于 libjpeg-turbo、spng、libwebp 和 SIMD 几何内核零 npm 依赖也不需要编译原生插件——只要环境中有 Bun 运行时即可直接使用。本文围绕「缩放 转 WebP」这一条路径展开如何构造输入、如何设置缩放参数、如何编码写出以及如何验证结果。构造图片输入Bun.Image的构造函数接受文件路径、字节数据或Blob包括Bun.file()与Bun.s3.file()。Blob#image()是new Bun.Image(blob)的简写new Bun.Image(./photo.jpg); // 文件路径 new Bun.Image(buffer); // Buffer / ArrayBuffer / TypedArray new Bun.Image(Bun.file(photo.jpg)); // BunFile惰性读取离线程执行 Bun.file(photo.jpg).image(); // 与上一行等价 Bun.s3.file(bucket/photo.jpg).image(); // S3File两点需要注意格式由字节内容嗅探Bun 会忽略文件扩展名和Content-Type所以源图扩展名写错也不影响解码路径字符串就是文件系统路径。不要把用户可控的字符串直接传给构造函数——这等于一个任意文件读取原语。不可信输入应先读入Buffer并用你自己的校验逻辑再传字节。构造函数还可以带第二个options参数用于防御解压炸弹和控制 EXIF 处理new Bun.Image(input, { // 宽×高超过该值时拒绝。在读完文件头后、分配像素缓冲前检查。 // 默认值与 Sharp 一致约 268 MP maxPixels: 4096 * 4096, // 在任何其他操作之前应用 JPEG 的 EXIF Orientation。默认true autoOrient: true, });如果你只想先确认输入图的实际尺寸不需要解码像素数据可以直接读元信息const { width, height, format } await new Bun.Image(input).metadata(); // 文档示例{ width: 1920, height: 1080, format: jpeg }上行的输出是源文档给出的示例结果实际数值取决于你的图片。用 resize 设置目标尺寸resize的调用形态决定缩放行为img.resize(800); // 宽 800保持宽高比 img.resize(800, 600); // 精确 800×600拉伸 img.resize(800, 600, { fit: inside }); // 完整放入 800×600 框内 img.resize(800, 600, { withoutEnlargement: true });// 不放大 img.resize(800, 600, { filter: mitchell }); // 指定重采样核fit的两个取值fit行为fill默认拉伸到精确的width × heightinside保持宽高比结果完整落在框内filter选择重采样核默认是lanczos3文档称其为照片类图像合适的默认选择。其他可选项包括lanczos2略柔和、振铃少、mitchell平滑渐变、cubic、mks2013/mks2021Facebook/Instagram 使用的 Magic Kernel Sharp、bilinear/linear快、偏软、box适合大整数倍缩小、nearest像素画/硬边缘。另外当源图是 JPEG 且目标尺寸不超过源尺寸的一半时解码会直接跳到最接近的 M/8 IDCT 缩放级别也就是说从 2400 万像素的照片生成缩略图时不会先materialize全分辨率缓冲。编码为 WebP 并写出文件链式调用格式方法即设置编码目标不指定任何格式方法时Bun 会沿用源格式img.webp({ quality: 80 }); // 有损 WebP img.webp({ lossless: true }); // 无损 WebP管线在await一个终结方法之前不做任何工作。可用的终结方法await img.bytes(); // Uint8Array await img.buffer(); // Buffer await img.blob(); // Blob.type 设为输出 MIME await img.toBase64(); // 字符串 await img.dataurl(); // data:image/...;base64,… await img.write(out.webp); // 返回写入的字节数 await img.write(Bun.s3.file(bucket/out.webp));把前面两步串起来就是本文标题对应的最短路径——从photo.jpg生成一张不超过 400×400 的 WebP 缩略图await Bun.file(photo.jpg) .image() .resize(400, 400, { fit: inside }) .webp({ quality: 80 }) .write(thumb.webp);两个补充事实write()返回写入的字节数可以直接用来确认输出非空如果你没有链任何格式方法而目标是一个路径字符串扩展名会决定输出格式.jpg/.png/.webp/.heic/.avif。也就是说Bun.file(photo.jpg).image().resize(400, 400).write(thumb.webp)同样会输出 WebP。验证结果第一次await终结方法之后img.width和img.height反映的是输出尺寸此前它们的值是-1可以直接断言缩放后的宽高用metadata()重新读取输出文件不解码像素即可拿到最终的width、height、format。平台差异与不支持项WebP 属于在所有平台都走静态链接编解码器libwebp的格式Linux、macOS、Windows 上的编码输出逐字节一致所以「转 WebP」这一步在三个平台上行为相同。需要注意的是源图格式的平台限制TIFF、HEIC、AVIF 的解码依赖系统后端Linux 上不可用终结对ERR_IMAGE_FORMAT_UNSUPPORTED报错error.code ERR_IMAGE_FORMAT_UNSUPPORTED。如果你的图片来源可能是 HEIC且可能运行在 Linux 上就应对该错误码做分支处理例如先转成 JPEG/PNG 再进入管线。文档给出的分支模式如下const out await img .avif({ quality: 50 }) .bytes() .catch(e { if (e.code ERR_IMAGE_FORMAT_UNSUPPORTED) return img.webp({ quality: 80 }).bytes(); throw e; });此外传入TypedArray/ArrayBuffer时不要在终结方法 pending 期间修改它——解码离线程执行并借用这块内存Bun 会拒绝SharedArrayBuffer和可调整大小的 buffer需要时用buf.slice()传一个固定视图。完整 API 细节rotate/flip、modulate、占位图、Bun.serve集成等见 Bun.Image 文档。【免费下载链接】bunIncredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one项目地址: https://gitcode.com/GitHub_Trending/bu/bun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考