概要

Web向け背景削除API

Webサイト、CMS、ランディングページ、オンラインプラットフォームへ簡単に自動背景削除機能を統合できます。

STEP 1

HTMLアップロードフォーム

ユーザーが画像をアップロードできるシンプルなHTMLフォームを作成します。

<input type="file" id="imageInput">

<button onclick="removeBg()">
    Remove Background
</button>

<div id="result"></div>

STEP 2

async function removeBg(){

    const fileInput =
    document.getElementById("imageInput");

    const result =
    document.getElementById("result");

    if(!fileInput.files.length){
        alert("Select image");
        return;
    }

    const formData = new FormData();

    formData.append(
        "file",
        fileInput.files[0]
    );

    result.innerHTML = "Processing...";

    const response = await fetch(
        "/web/remove-bg",
        {
            method:"POST",
            body:formData
        }
    );

    if(!response.ok){

        result.innerHTML =
        "Something went wrong";

        return;
    }

    const blob =
    await response.blob();

    const url =
    URL.createObjectURL(blob);

    result.innerHTML = `
        <img src="${url}">
    `;
}

STEP 3

SECURITY

セキュリティ推奨事項

APIキーをフロントエンドコードへ公開しないでください。
アップロードされたファイルを処理前に検証してください。
不正利用防止のためファイルサイズを制限してください。
APIリクエストには常にHTTPSを使用してください。
APIキーはサーバーの環境変数に保存してください。

ERRORS

Status

Description

401

413

429

500

JavaScriptへ進む

JavaScriptとFetch APIを利用した最新のWeb統合方法を学びましょう。

JavaScript ガイド

Web / HTML 統合

Web向け背景削除API

HTMLアップロードフォーム

セキュリティ推奨事項

JavaScriptへ進む