解析删除BG数据结果到内部HTML元素（例如IMG.SRC）
我正在尝试在普通的JS文件中使用remove.bg API，其目标是将图像URL作为参数传递，然后将所得图像输出到HTML主体内的IMG标签。
不幸的是，由于结果，该项目并未提供此类用法的文档。DATA旨在由Filesystem的WriteFileSync使用，因为我在运行静态网站时无法使用它。
是否有机会，如上所述解析结果，并将IMG标签的SRC设置为结果，背景被检查的图像？
以下是到目前为止确实返回响应的示例代码。预先感谢您的宝贵时间！
function removebackground(){
let formData = {
"image_file_b64": "",
"image_url": "https://meta.hapeprime.com/7386.png",
"size": "preview",
"type": "auto",
"type_level": "1",
"format": "auto",
"roi": "0% 0% 100% 100%",
"crop": false,
"crop_margin": "0",
"scale": "original",
"position": "original",
"channels": "rgba",
"add_shadow": false,
"semitransparency": true,
"bg_color": "",
"bg_image_url": ""
};
axios({
method: 'post',
url: 'https://api.remove.bg/v1.0/removebg',
data: formData,
responseType: 'arraybuffer',
headers: {
'X-Api-Key': 'API_KEY',
},
encoding: null
})
.then((response) => {
if(response.status != 200) return console.error('Error:', response.status, response.statusText);
console.log(response);
})
.catch((error) => {
return console.error('Request failed:', error);
});
}
I am trying to use the Remove.bg API in a plain JS file, with the goal of passing image URLS as parameters and then outputting the resulting image to an IMG tag within the HTML body.
Unfortunately, the project does not provide documentation for such usage, as the results.data is intended to be used by FileSystem's writeFileSync, which I cannot use as I am running a static website.
Is there per chance, any way to parse the results as described and perhaps set an IMG tag's src to the resulting, background-removed image?
Below is an example code that so far DOES return a response. Thank you in advance for your time!
function removebackground(){
let formData = {
"image_file_b64": "",
"image_url": "https://meta.hapeprime.com/7386.png",
"size": "preview",
"type": "auto",
"type_level": "1",
"format": "auto",
"roi": "0% 0% 100% 100%",
"crop": false,
"crop_margin": "0",
"scale": "original",
"position": "original",
"channels": "rgba",
"add_shadow": false,
"semitransparency": true,
"bg_color": "",
"bg_image_url": ""
};
axios({
method: 'post',
url: 'https://api.remove.bg/v1.0/removebg',
data: formData,
responseType: 'arraybuffer',
headers: {
'X-Api-Key': 'API_KEY',
},
encoding: null
})
.then((response) => {
if(response.status != 200) return console.error('Error:', response.status, response.statusText);
console.log(response);
})
.catch((error) => {
return console.error('Request failed:', error);
});
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这取决于API的响应类型。
如果就像 https://clipdrop.co/apis/apis/docs/docs/docs/remove-background API会用斑点响应，使用它，您可以使用
url.createobjecturl（wendesp）创建一个有效的SRC路径：您可以在此处找到一个示例： https：//github.com/github.com/initml/clipdrop -api -smples/blob/main/web/remove-objects-tfjs/components/result.tsx＃l63It depends on the response type of the API.
If it's like the https://clipdrop.co/apis/docs/remove-background API it will respond with a blob, with it you can use
URL.createObjectURL(response)to create a valid src path : you can find an example here : https://github.com/initml/clipdrop-api-samples/blob/main/web/remove-objects-tfjs/components/Result.tsx#L63