Bun Image:无需 npm 依赖的图像处理管道,支持多格式解码与转换!
1. Bun Image 是什么Bun Image 是一个可链式调用的图像处理管道用于对 JPEG、PNG、WebP、HEIC 和 AVIF 图像进行解码、调整大小、旋转和重新编码。它基于 libjpeg - turbo、spng、libwebp 和 SIMD 几何内核构建无需 npm 依赖也无需进行原生插件构建。其 API 设计借鉴了 Sharp从输入开始构建链式调用转换操作选择输出格式然后等待终结方法执行在调用终结方法之前不会执行任何操作且处理工作会在 JavaScript 线程之外执行。2. 输入方式有哪些构造函数接受路径、字节或 Blob包括 Bun.file() 和 Bun.s3()。Blob#image() 是 new Bun.Image(blob) 的简写。图像格式通过字节进行检测扩展名和 Content - Type 会被忽略。路径字符串指的是文件系统路径不要直接将用户可控的字符串传递给构造函数应将不可信的输入读取到 Buffer 中然后传递字节。当传递 TypedArray 或 ArrayBuffer 时在终结操作未完成之前不要修改它。第二个 options 参数可防止解压缩炸弹并控制 EXIF 处理。3. 如何获取元数据在不解码像素数据的情况下可通过 await new Bun.Image(input).metadata() 读取 width、height 和 format。4. 怎样进行调整大小操作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 有 fill默认拉伸至精确的 width × height和 inside保持宽高比结果适应指定区域两种模式。filter 有多种选择默认的 lanczos3 适用于照片。当源图像为 JPEG 且目标大小最多为源大小的一半时解码会直接跳到最近的 M/8 IDCT 缩放。5. 旋转和翻转操作如何实现img.rotate(90) 可顺时针旋转 90°仅支持 90 的倍数img.flip() 可垂直镜像关于 x 轴img.flop() 可水平镜像关于 y 轴。6. 怎样进行调制img.modulate({ brightness: 1.2, saturation: 0 }) 可对图像进行调制其中 brightness 为 1 表示不变saturation 为 0 表示灰度1 表示不变1 表示增强。7. 输出格式有哪些选择调用格式方法可设置编码目标若未调用则使用源格式。如 img.jpeg({ quality: 85 })、img.png({ compressionLevel: 6 })、img.png({ palette: true, colors: 64, dither: true })、img.webp({ quality: 80 })、img.webp({ lossless: true })、img.heic({ quality: 80 })仅适用于 macOS / Windows、img.avif({ quality: 60 })仅适用于 macOS / Windows。palette: true 会将图像量化为最多 256 种颜色的调色板并输出索引颜色类型 3PNG。8. 终结操作有哪些在等待以下操作之一之前管道不会执行任何工作await img.bytes()、await img.buffer()、await img.blob()、await img.toBase64()、await img.dataurl()、await img.write(out.webp)、await img.write(Bun.s3(bucket/out.webp))。.write() 接受与 Bun.write 相同的目标如果未链式调用格式方法且目标是路径字符串则根据扩展名选择格式。9. 占位符如何使用为了在真实图像加载之前在 HTML 中嵌入低质量占位符.placeholder() 会返回一个基于 ThumbHash 渲染的最大 32 像素模糊的 data: URL大小约为 400 - 700 字节无需客户端解码器。若要对图像本身进行从粗到细的渲染可编码为渐进式 JPEG。在第一个终结操作完成后img.width 和 img.height 会反映输出尺寸之前为 - 1。10. 如何实现 Bun.serve 集成Bun Image 管道可以作为有效的 Response 主体并自动设置 Content - Type。为了在服务器处理程序中让编码操作在 JS 线程之外执行应先等待终结操作。直接传递管道new Response(img)也可以但目前在主体初始化时会同步执行编码。11. 剪贴板功能如何使用const img Bun.Image.fromClipboard() 可从 macOS 和 Windows 的系统剪贴板读取 PNG、TIFF、HEIC、JPEG、WebP、GIF 或 BMP 图像后续使用常规的解码管道进行处理。如果剪贴板中没有图像则返回 null在 Linux 上始终返回 null需要自行调用 wl - paste 或 xclip 并将字节传递给构造函数。若要实现被动的 “剪贴板中有图像按 ⌘V” 提示可轮询 clipboardChangeCount()仅在其值变化时调用 hasClipboardImage()。12. 不同平台的后端情况如何不同平台后端情况不同如在 Linux、macOS、Windows 上JPEG / PNG / WebP 都使用 libjpeg - turbo、spng、libwebpBMP / GIF解码在 Linux 是内置在 macOS 是 ImageIO在 Windows 是 WICTIFF解码在 macOS 是 ImageIO在 Windows 是 WIC在 Linux 不支持调整大小 / 旋转 / 翻转在 Linux 和 Windows 是 Highway SIMD在 macOS 是 Accelerate vImageHEIC / AVIF 在 macOS 和 Windows 部分支持在 Linux 不支持。当系统后端格式在当前机器上不可用时终结操作会抛出 error.code ERR_IMAGE_FORMAT_UNSUPPORTED 错误可根据此错误进行分支处理回退到便携式格式。由系统后端处理的格式会继承操作系统的补丁级别JPEG、PNG 和 WebP 在所有平台上使用相同的静态链接编解码器。若要强制使用便携式的 Highway 路径进行几何处理可设置全局后端Bun.Image.backend bun。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2640525.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!