超大图像完美不压缩抠图的方案:API Web 页部署

目前使用下来市面上开源最好的抠图工具 Briefnet 其实还是抠的不够好

Clipdrop 的在线版抠图效果还不错但是有图像尺寸的限制,而且不仅有抠图的工具,

PS:Figma抠图,目前教育版也免费使用,实测和 Clip 抠的效果差不多

但官方提供了 API 于是进行了部署,直接 Fork 官方的仓库:

✔ 可以本地运行

✔ 一个手机账号注册送100点,抠一次图扣1一点,目前使用进度:97/100

× 绑定域名运行还不行

官方文档(Create React App 部署文档)说明了 homepage 字段的作用和 build 目录结构的影响。


  • 本地 build 后,静态文件在 build/apis/demos/bulk-remove-background/ 目录下,而不是直接在 build/ 下。
  • 这是因为的package.json 里设置了:
    "homepage": "/apis/demos/bulk-remove-background/"
    
  • 官方文档也说了,设置 homepage 后,所有资源路径和 build 输出都会以这个路径为前缀。

  • 默认情况下,Create React App 假设你的应用部署在服务器根目录,build 输出在 build/ 下。
  • 如果你要部署到子路径(比如 GitHub Pages 或你的网站的某个子目录),就要设置 homepage 字段,这样资源路径才会正确。
  • 但这样 build 输出会在 build/子路径/ 下。
By default, Create React App produces a build assuming your app is hosted at the server root.

To override this, specify the homepage in your package.json, for example:

"homepage": "<http://mywebsite.com/relativepath>",

This will let Create React App correctly infer the root path to use in the generated HTML file.


  1. 删除或修改 package.json 里的 homepage 字段为 / 或直接删掉。
  2. 重新 build,静态文件会直接在 build/ 下。
  3. Vercel 的 Output Directory 填 build
  4. 这样访问你的 Vercel 域名根路径就是你的 React 应用。
  1. 保持 homepage 字段为 /apis/demos/bulk-remove-background/
  2. build 后,静态文件在 build/apis/demos/bulk-remove-background/ 下。
  3. Vercel 的 Output Directory 填 build/apis/demos/bulk-remove-background
  4. 这样访问你的 Vercel 域名时,需要加上 /apis/demos/bulk-remove-background/ 路径。

  • 想让 build 目录下直接有静态页面,package.json 里不要设置 homepage,或者 homepage 设为 /
  • 想用子路径,Vercel Output Directory 要和 build 目录结构一致

官方文档原文参考:

By default, Create React App produces a build assuming your app is hosted at the server root.

To override this, specify the homepage in your package.json, for example:

"homepage": "<http://mywebsite.com/relativepath>",

This will let Create React App correctly infer the root path to use in the generated HTML file.

官方文档链接


💡
欢迎分享文章,或是与我联系