{"id":18862652,"url":"https://github.com/zk-phi/kusocolla-republic","last_synced_at":"2025-09-11T02:33:06.293Z","repository":{"id":152679663,"uuid":"141829179","full_name":"zk-phi/kusocolla-republic","owner":"zk-phi","description":"背景抜き太郎","archived":false,"fork":false,"pushed_at":"2020-02-14T10:21:40.000Z","size":39,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"gh-pages","last_synced_at":"2024-12-30T21:15:54.572Z","etag":null,"topics":["tool","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zk-phi.png","metadata":{"files":{"readme":"Readme.markdown","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-21T16:31:57.000Z","updated_at":"2021-02-13T04:39:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"3e411871-b836-4b1b-ba79-8689ee77afc3","html_url":"https://github.com/zk-phi/kusocolla-republic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zk-phi%2Fkusocolla-republic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zk-phi%2Fkusocolla-republic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zk-phi%2Fkusocolla-republic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zk-phi%2Fkusocolla-republic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zk-phi","download_url":"https://codeload.github.com/zk-phi/kusocolla-republic/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239808130,"owners_count":19700440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tool","web"],"created_at":"2024-11-08T04:35:22.827Z","updated_at":"2025-02-20T08:42:49.945Z","avatar_url":"https://github.com/zk-phi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"背景抜き太郎: http://zk-phi.github.io/kusocolla-republic\n\n# 背景抜き太郎 (index.html, script.js)\n\ncanvas + webworker を使ってブラウザ上でゴリゴリ画像処理するサンプルです。\n\n普通に使えると思うので、よしなに遊んでください。\n\n# growcut.js を直接使う\n\n背景分離 (画像セグメンテーション) アルゴリズム \"growcut\" の js 実装です。\n\n## 1. 元画像を用意する\n\n元画像を `[R, G, B, A, R, G, B, A, ...]` の `Uint8Array` で用意します。\n\n```javascript\nvar sourceImage = ...;\nvar imageWidth  = ...;\nvar imageHeight = sourceImage.length / imageWidth;\n```\n\n用意した画像を growcut エンジンに渡します。\n\n```javascript\nGrowcut.loadImage(imageWidth, imageHeight, sourceImage);\n```\n\nTips: 画像ファイルから作る場合は、いったん canvas に流してから `getImageData` を使うと `Uint8Array` が取れます。\n\n```javascript\nvar context = canvas.getContext('2d');\ncontext.drawImage(image, 0, 0);\nsourceImage = context.getImageData.data;\n```\n\n## 2. 前景・背景のヒントを用意する\n\n前景・背景のヒントデータを `1` (確実に背景), `2` (確実に前景), `0` (おまかせ) の `Uint8Array` として用意します。\n\nたいていはユーザーの入力から生成する感じになると思います。\n\n```javascript\nvar seedImage = ...;\n```\n\n用意したヒントデータを growcut エンジンに渡します。\n\n```javascript\nGrowcut.initialize(seedImage);\n```\n\n## 3. growcut を開始する\n\n`forwardGeneration` 関数で growcut を一世代進めることができます。この関数は前の世代から変化のあったセルの数を返すので、たいていの場合、 `0` になるまで (収束するまで) 繰り返すことになると思います。\n\n```javascript\nvar updated;\ndo {\n  updated = Growcut.forwardGeneration();\n  console.log(updated);\n} while (updated);\n```\n\n## 4. 結果を取得\n\n`getResult` 関数で growcut の結果を取得します。結果は次のパラメータを含むハッシュで得られます：\n\n- top: もっとも上にある前景セルの位置\n- left: もっとも左にある前景セルの位置\n- height: left からもっとも右にある前景セルまでの距離\n- width: top からもっとも下にある前景セルまでの距離\n- data: それぞれのピクセルが背景 (`0`) か前景 (`255`) かを並べた `Uint8Array`\n\ngrowcut が完全に収束する前に `getResult` が呼び出された場合、未確定のセルは全て前景として返ります。\n\n## WebWorker から使う\n\nWebWorker 用のインターフェースが用意してあるので、 WebWorker を利用して非同期に、マルチスレッドで実行することもできます。\n\nJSONRPC のように、 worker へのメッセージに `{ method: \"関数名\", ...引数s }` を送ることでその関数を非同期に呼び出すことができ、完了すると worker は `{ method: \"関数名-complete\", ...戻り値 }` を送り返してきます。\n\n```javascript\nvar worker = new Worker(\"growcut.js\");\n\nworker.postMessage({ method: \"loadImage\", width: imageWidth, height: imageHeight, sourceImage: sourceImage });\n\nvar result;\nworker.addEventListener(('message'), function (e) {\n  switch (e.data.method) {\n    case \"loadImage-complete\":\n      worker.postMessage({ method: \"initialize\", seedImage: seedImage });\n      break;\n    case \"initialize-complete\":\n      worker.postMessage({ method: \"forwardGeneration\" });\n      break;\n    case \"forwardGeneration-complete\":\n      worker.postMessage({ method: e.data.updated ? \"forwardGeneration\" : \"getResult\" });\n      break;\n    case \"getResult-complete\":\n      result = e.data.result;\n      break;\n  }\n});\n```\n\n※本当は `postMessage` は `addEventListener` の後に書くのが適切ですが、わかりやすいので説明用にこの順にしています\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzk-phi%2Fkusocolla-republic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzk-phi%2Fkusocolla-republic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzk-phi%2Fkusocolla-republic/lists"}