计算机视觉图像处理AI 应用【免费下载链接】background-removal-jsRemove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns. Explore an interactive demo.项目地址https://gitcode.com/gh_mirrors/ba/background-removal-js点击查看免费下载本文以 packages/web/CHANGELOG.md 为骨架逐版本梳理imgly/background-removal本仓库 background-removal-js 的核心 npm 包从 1.2.0 到 1.5.6 的能力演进并结合仓库源码印证每一项变更背后的真实实现。读完本文你将掌握该库的导出格式体系、函数级 API 设计、GPU/CPU 执行切换、资源分块加载等关键机制并能据 Changelog 中的版本线索快速定位源码实现与配置用法。一、CHANGELOG 是什么一份由 YAML 条目自动生成的变更档案packages/web/CHANGELOG.md声明其格式基于 Keep a Changelog 规范并遵循语义化版本Semantic Versioning。但这份文件并非手工维护仓库采用条目即源码的自动化工作流——每个变更条目是一个独立的 YAML 文件存放在 packages/web/changelog/ 目录下按版本号分子目录如1.2.0/、1.3.0/、1.5.0/未发布的变更进入Unreleased/。每个条目文件包含typeAdded/Changed/Removed/Security或private: true用于标记私有条目和description字段例如 1.5.0 的 20242403201534-Added_option_to_execute_on_gpu_webgpu_and_cpu_Added.yaml。生成脚本 scripts/changelog/changelog-generate.mjs 扫描./changelog目录按版本号倒序解析所有 YAML 文档按类型分组后写出CHANGELOG.md新增条目则由 scripts/changelog/changelog-create.mjs 配合 template.yml.ejs 模板完成支持--message、--type、--help等命令行参数package.json中通过changelog:create与changelog:generate脚本接入构建流程见 packages/web/package.json。理解这套机制后下面逐版本解读 CHANGELOG 记录的技术演进。二、版本演进总览版本类型核心变更1.2.0Added支持foreground/background/mask三种导出类型新增webp、jpeg导出格式1.2.1Added引入CHANGELOG.md支持原始rgba8导出格式1.3.0Added / Removed / Changed拆分为removeBackground、removeForeground、segmentForeground三个函数新增x-alpha8单通道 alpha mask 导出移除导出类型的配置选项progress 回调返回类型改为void输出恢复原始图像尺寸1.4.0Added / Changed数据移入独立数据包onnx runtime 升级至 1.17许可证 GPL → AGPL新增applySegmentationMaskOffscreenCanvas 不可用时回退 CanvasTypeScript 绑定改用tsc生成1.4.5Added新增ThirdPartyLicenses.json第三方许可证清单1.5.0Added支持 GPUWebGPU与 CPU 执行通过device: gpu开启新增适用于 WebGPU 的 isnet 模型1.5.6Changed升级 onnx-runtime从这份时间线可以清晰看出该库的发展脉络先建立导出格式 导出类型的输出能力再重构为函数级 API 并调整输出语义随后做工程化数据分包、类型绑定、许可证合规最终引入 WebGPU 硬件加速。三、1.2.x导出类型与格式能力的奠基1.2.0三种导出类型 两种新格式1.2.0 引入的核心能力是导出类型foreground、background、mask与webp、jpeg两种导出格式。需要说明的是该版本的导出类型是通过配置项指定的而这一设计在 1.3.0 被移除见下文当前源码已不再包含output.type配置。导出格式的能力在 packages/web/src/codecs.ts 中落地imageEncode针对image/png、image/jpeg、image/webp通过 Canvas 的convertToBlob({ quality, type: format })编码编码质量由quality参数控制默认 0.8对应的imageDecode则支持image/png、image/jpeg、image/jpg、image/webp及application/octet-stream的输入解码统一转为 RGBA 的 ndarray 张量。1.2.1raw rgba8 与 CHANGELOG 的引入1.2.1 新增两项原始rgba8导出格式。这类格式不走 Canvas 编码而是直接以二进制 Blob 输出像素数据MIME 类型为image/x-rgba8并在 MIME 参数中携带width、height信息见 packages/web/src/MimeType.ts 的MimeType.create(format, { width, height })。解码侧同样按 MIME 参数还原形状见codecs.ts的imageDecode。原始格式适合后续在服务端或另一段图像管线中继续处理避免 PNG/JPEG 的二次编解码损耗。CHANGELOG.md本身——即本文所依赖的文档从此项目的变更历史有了规范记录。四、1.3.0函数级 API 重构与输出语义调整1.3.0 是 API 形态的一次重要转折CHANGELOG 记录的五条变更相互关联。4.1 拆分为三个语义明确的函数CHANGELOG 记录Separate functions forremoveBackground,removeForeground, andsegmentForeground即把原先一个函数 导出类型配置的模式改为按语义拆分的独立函数。当前源码 packages/web/src/api/v1.ts 中三者实现差异如下removeBackground(image, config)推理得到 alpha mask 后将 mask 写入输出张量的 Alpha 通道outImageTensor.data[4 * i 3] alphamask.data[i]得到背景被移除的前景图removeForeground(image, config)逻辑相反写入255 - alphamask.data[i]保留背景、移除前景segmentForeground(image, config)只提取前景分割结果将 RGB 通道置为 255、仅保留 Alpha 通道的 mask 值可理解为mask 可视化/复用用途。4.2 移除导出类型配置选项与函数拆分配套CHANGELOG 记录Removed - Configuration options to specify if background, foreground or mask is exported。在 packages/web/src/schema.ts 的ConfigSchema中可以看到印证output对象目前仅包含format与quality两个字段不再有typeforeground/background/mask选项——导出类型的控制权已完全移交给了调用哪个函数。4.3 新增 x-alpha8单通道 alpha mask 导出新增x-alpha8格式用于receive single channel alpha mask。从codecs.ts可以看到其编码方式直接以new Blob([imageTensor.data], { type: mime.toString() })输出单通道像素数据MIME 为image/x-alpha8同样通过参数携带宽高。这对需要在浏览器外复用 mask如服务端合成的场景非常实用。4.4 progress 回调返回类型undefined → voidCHANGELOG 记录Changed the return value type of the progress callback from undefined to void。这在 packages/web/src/schema.ts 的 zod 定义中落实progress: z.function().args(z.string(), z.number(), z.number()).returns(z.void()).optional()回调签名为(key: string, current: number, total: number) void。key用于区分下载/计算阶段如fetch:...、compute:decode、compute:inference等见api/v1.ts与 packages/web/src/resource.ts。4.5 输出恢复原始图像尺寸mask 上采样CHANGELOG 记录Output is now in the original image size. Mask is upscaled and applied to the original image.。此前输出可能是模型推理的固定分辨率1.3.0 起改为保留原图尺寸。其实现位于 packages/web/src/inference.ts模型输入统一缩放到 1024×1024const resolution 1024推理出的 alpha mask 通过tensorResizeBilinear上采样回源图像宽高config.rescale为true时再在api/v1.ts中写回原始图像张量的 Alpha 通道。这也解释了配置项rescale默认true的存在意义。4.6 资源分块4MB 分片下载Resources are now chunked to 4MB for better caching performance and download restart 对应 packages/web/src/resource.ts 的加载逻辑资源元数据resources.json中每个资源包含chunks数组loadAsBlob逐块fetch通过chunk.offsets计算每块期望大小并与实际blob.size校验全部块下载完成后合并为完整 Blobprogress回调会累计已下载字节数config.progress(fetch:${key}, downloadedSize, entry.size)。分块的意义在于单块失败时浏览器缓存与断点续传代价更小也更利于 CDN 缓存大体积的 ONNX 模型文件。五、1.4.0工程化调整与许可证变更1.4.0 的变更以工程化和合规为主同时新增了一个重要的功能性 API。5.1 数据移入独立包减小主包体积Moved all data into its own package. Therefore, reducing the main package size for the general case. 模型与 WASM 等二进制资源不再打进主包而是由独立的imgly/background-removal-data数据包承载。仓库中 scripts/package-resources.mjs 负责资源的打包流程package.json的resources脚本即调用它默认资源地址形如https://staticimgly.com/imgly/background-removal-data/${PACKAGE_VERSION}/dist/见schema.ts中publicPath的默认值及其${PACKAGE_NAME}/${PACKAGE_VERSION}占位符替换逻辑。用户可通过publicPath配置指向自托管资源详见 packages/web/README.md 的 Custom Asset Serving 章节。5.2 onnx runtime 升级至 1.17Bumped onnx runtime to 1.17。onnxruntime-web 作为 peer dependency 提供当前 packages/web/package.json 中peerDependencies.onnxruntime-web为1.21.0对应后续 1.5.6 的再次升级运行时通过InferenceSession.create(model, ortConfig)创建会话见 packages/web/src/onnx.ts。5.3 许可证GPL → AGPLChanged license from GPL to AGPL。仓库根目录 LICENSE.md 与 packages/web/LICENSE.md 均为 AGPL 授权README.md亦注明 free for use under the AGPL License如有其他授权需求需联系版权方。5.4 新增 applySegmentationMask同一 mask 复用于 srcsetsAdded option to apply segmentation mask to any image. Used for applying the same mask to srcsets. 这是 1.4.0 的功能亮点applySegmentationMask(image, mask, config)允许把任意一张图的分割 mask 应用到另一张图。其典型场景是响应式图片的 srcset同一内容的多张不同尺寸图片只需推理一次得到 mask 后即可复用于所有变体。源码 packages/web/src/api/v1.ts 中该函数会先比较 mask 与目标图的宽高若不一致则通过tensorResizeBilinear将 mask 双线性插值到目标图尺寸再把 mask 的 Alpha 通道写入目标图的对应像素。5.5 OffscreenCanvas 回退到 CanvasFallback to Canvas if OffscreenCanvas is not available 对应 packages/web/src/utils.ts 的createCanvas优先使用OffscreenCanvasWorker 环境与高性能场景不可用时回退到document.createElement(canvas)两者均不可用时抛出明确错误。5.6 TypeScript 绑定由 tsc 生成Typescript bindings are generated with tsc。此前类型声明可能由其他工具生成现在统一由tsc --declaration --emitDeclarationOnly --declarationDir dist --declarationMap产出package.json的types脚本保证类型定义与源码严格一致。六、1.4.5第三方许可证清单Added ThirdPartyLicenses.json 对应 packages/web/ThirdPartyLicenses.json。该文件逐项列出运行时依赖及其许可onnxruntime-web代码MITISNET模型MIT源自 xuebinqin/DISlodash-es代码MITndarray代码MITzod代码MIT这为商业集成时的合规审计提供了直接依据。七、1.5.0GPUWebGPU执行与 isnet 模型1.5.0 的两条变更共同构成硬件加速能力7.1 device: gpu —— WebGPU 执行Added option to execute on gpu (webgpu) and cpu. Enable by settingdevice: \gpu\。配置项device的取值在schema.ts中定义为z.enum([cpu, gpu]).default(cpu)。其执行路径见 packages/web/src/onnx.tsuseWebGPU config.device gpu (await caps.webgpu())——即不仅要求配置为 gpu还要求浏览器实际支持 WebGPU检测逻辑在 packages/web/src/capabilities.js检查navigator.gpu且能成功requestAdapter通过动态import(onnxruntime-web/webgpu)按需加载 WebGPU 后端避免默认打包整个运行时executionProviders相应设为[webgpu]或[wasm]WASM 环境的线程数由caps.maxNumThreads()即navigator.hardwareConcurrency缺省 4决定。7.2 isnet 模型Added isnet model for webgpu——为 WebGPU 准备了 isnet 系列模型。仓库 bundle/models/ 目录下可见isnet、isnet_fp16、isnet_quint8三种模型。在schema.ts的model配置中还提供了语义化别名large→isnet、medium→isnet_fp16默认、small→isnet_quint8量化模型体积更小但偶有伪影README.md中注明 small 约 40 MB、medium 约 80 MB。模型按需通过resource.ts的loadAsBlob(/models/${model}, config)加载。八、1.5.6onnx-runtime 再次升级Upgrade onnx-runtime——1.5.6 将 onnxruntime-web 再度升级。当前仓库 packages/web/package.json 的peerDependencies为onnxruntime-web: 1.21.0README 中给出的安装示例版本为1.21.0-dev.20250206-d981b153d3与 1.4.0 的 1.17 相比跨过了多个大版本带来了 WebGPU 后端与 WASM 线程模型的持续改进。需要留意的是仓库当前 package 版本号1.7.0已领先于 CHANGELOG 记录的最新版本1.5.6changelog/Unreleased/目录仍在累积待发布条目属于正常的分支开发状态。九、从 Changelog 到实战配置速查与使用要点将 CHANGELOG 中的能力落到实际使用时可对照 packages/web/src/schema.ts 中经 zod 校验的完整配置含默认值type Config { publicPath: string; // 模型与 wasm 资源的公共路径默认 https://staticimgly.com/imgly/background-removal-data/${PACKAGE_VERSION}/dist/ debug: boolean; // 是否输出调试日志默认 false rescale: boolean; // 是否将 mask 上采样回原图尺寸默认 true对应 1.3.0 变更 device: cpu | gpu;// 执行设备gpu 使用 WebGPU对应 1.5.0 变更默认 cpu proxyToWorker: boolean;// 是否将推理代理到 Web Worker默认 false fetchArgs: any; // 传给 fetch 的附加参数如 CORS 场景的 mode progress: (key: string, current: number, total: number) void; // 进度回调对应 1.3.0 返回类型变更 model: isnet | isnet_fp16 | isnet_quint8; // 模型别名 small/medium/large默认 medium(isnet_fp16)对应 1.5.0 变更 output: { format: image/png | image/jpeg | image/webp | image/x-rgba8 | image/x-alpha8; // 默认 image/png对应 1.2.0 / 1.2.1 / 1.3.0 quality: number; // 编码质量默认 0.8 }; };对应 1.2.0 的导出类型能力现在通过选择函数来实现1.3.0 重构后的形态见 packages/web/src/api/v1.tsimport { removeBackground, removeForeground, segmentForeground, applySegmentationMask, preload } from imgly/background-removal; // 移除背景返回前景 BlobPNG/JPEG/WebP 或原始格式 const fg await removeBackground(imageSrc); // 移除前景保留背景 const bg await removeForeground(imageSrc); // 仅提取分割 maskRGB 置白、仅留 alpha const mask await segmentForeground(imageSrc); // 将某张图的 mask 复用到另一张图srcset 场景1.4.0 const applied await applySegmentationMask(targetImage, mask); // 预加载全部资源模型 wasm避免首次调用时的下载等待 await preload(config);实战中两个高频配置场景下载进度监控对应 1.3.0 的 progress 机制在config.progress中按key区分资源下载fetch:...与计算阶段compute:decode→compute:inference→compute:mask→compute:encode见api/v1.ts的调用顺序current/total可用于渲染进度条。GPU 加速与性能前提对应 1.5.0设置device: gpu后库会先探测 WebGPU 可用性再选择后端同时README.md指出WASM 多线程依赖SharedArrayBuffer为此站点需设置Cross-Origin-Opener-Policy: same-origin与Cross-Origin-Embedder-Policy: require-corp两个响应头以启用跨源隔离。十、本文涉及的仓库文件索引变更记录与工作流packages/web/CHANGELOG.md、packages/web/changelog/、scripts/changelog/changelog-generate.mjs、scripts/changelog/changelog-create.mjs、scripts/changelog/template.yml.ejs配置与类型packages/web/src/schema.ts、packages/web/package.json公开 APIpackages/web/src/api/v1.ts、packages/web/src/index.ts推理与后端packages/web/src/inference.ts、packages/web/src/onnx.ts、packages/web/src/capabilities.js资源加载packages/web/src/resource.ts、scripts/package-resources.mjs编解码与工具packages/web/src/codecs.ts、packages/web/src/MimeType.ts、packages/web/src/utils.ts、packages/web/src/url.ts模型与合规bundle/models/、packages/web/ThirdPartyLicenses.json赞分享计算机视觉图像处理AI 应用【免费下载链接】background-removal-jsRemove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns. Explore an interactive demo.项目地址https://gitcode.com/gh_mirrors/ba/background-removal-js点击查看免费下载相关推荐Background-Removal-JS终极指南浏览器端智能抠图实战完全手册Background Removal JS终极指南浏览器端智能抠图实战完全手册 想要在浏览器或Node.js中实现零成本、高隐私保护的智能抠图吗Backgr计算机视觉图像处理AI 应用浏览器端AI智能抠图Background-Removal-JS终极使用指南浏览器端AI智能抠图Background Removal JS终极使用指南 在当今数字时代图像处理已成为Web应用开发中不可或缺的一环。 Backgroun计算机视觉图像处理AI 应用浏览器端智能抠图神器Background-Removal-JS完全指南浏览器端智能抠图神器Background Removal JS完全指南 想要在浏览器中实现专业级图像背景移除功能吗Background Removal JS计算机视觉图像处理AI 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考