前段时间在github上有个能在浏览器扣图的js库蛮火https://github.com/imgly/background-removal-js
演示网站：demo
图片1
不仅仅能将人物主体扣出，还能处理动物、植物等
最近我萌发出在vue中运行这个库的想法，记录一下

下载、配置

首先当然是通过npm下载这个js库

1
npm i @imgly/background-removal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<template>
  <div id="app">
    <input type="file" @change="removeBackground" />
    <div>
      <h2>抠图结果：</h2>
      <div v-if="loading">
        抠图中...
      </div>
      <div v-else>
        <img v-if="backgroundRemoved" :src="backgroundRemoved" />
      </div>
    </div>
    
  </div>
</template>

<script>
import imglyRemoveBackground from "@imgly/background-removal";

export default {
  name: 'App',
  data() {
    return {
      uploadimg:false,
      backgroundRemoved: null,
      loading:false,
    }
  },
  methods: {
    async removeBackground(event) {
      const file = event.target.files[0];
      this.removeBackgorund(file)
    },
    async removeBackgorund(temUrl){
      this.loading = true;
      let config = {
        // publicPath: "/src/static/removeBk/",//将模型文件存入本地，直接从项目本地跑模型，省去了下载模型的时间
        // fetchArgs: {
        //   mode: "no-cors",//跨域问题
        // },
        progress: (key, current,total) => {//进度回调，目前只会返回加载模型的进度，处理图片的进度不会返回
          // loading.value = !(key==='compute:inference' && current === 1)
          console.log(`下载中：${key}:${current} of ${total}`)
        },
      }
      const blob = await imglyRemoveBackground(temUrl, config)
      console.log('blob',blob)
      this.backgroundRemoved = URL.createObjectURL(blob);
      this.loading = false;
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后就可以用了，，很方便

配置项

其中imglyRemoveBackground接收的第一个参数是本地图片地址，通过上传图片拿到bolb格式，将其传入，第二参数是配置项，目前全部的配置项有六个

1
2
3
4
5
6
publicPath: //找本地模型文件所处位置，配置了可以直接从项目本地跑模型，省去了下载模型的时间;
fetchArgs: boolean;//如果您遇到CORS问题，您可能希望通过fetch函数传递额外的参数。
progress: //进度回调函数，第一个参数是当前在处理什么，第二个是当前处理到多少，第三个是总大小;
debug: boolean; // 启用或禁用有用的控制输出。
proxyToWorker: boolean; // 是否将计算代理给Web Worker进行处理。（默认为true）
model: 'small' | 'medium'; // 使用的模型。（默认为“medium” 80m大小） small 40m大小

其中publicPath配置项加上抠图速度能提升不小，不加就是每次运行方法会下载抠图模型，加了后直接跑项目的模型，
将node_modules/@imgly/background-removal-data/dist下的模型文件复制到项目其他地方放置，可以减少去背景的时间，
但是报错，一直没成功,如果你们成功，告诉我一下怎么配置的

原文链接：https://blog.csdn.net/imsopoor/article/details/131577423