{"id":17933933,"url":"https://github.com/king2088/simple-image-label","last_synced_at":"2025-03-24T07:31:12.527Z","repository":{"id":192842998,"uuid":"687475559","full_name":"king2088/simple-image-label","owner":"king2088","description":"Simple image annotate, support YOLO/VOC annotate.","archived":false,"fork":false,"pushed_at":"2023-09-11T07:48:51.000Z","size":2444,"stargazers_count":25,"open_issues_count":3,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T19:31:36.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://king2088.github.io/simple-image-label/","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/king2088.png","metadata":{"files":{"readme":"readme-zh.md","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":"2023-09-05T12:37:18.000Z","updated_at":"2025-02-25T03:15:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"d16dc7ab-cecd-4a03-8d4b-9a0f31b6c454","html_url":"https://github.com/king2088/simple-image-label","commit_stats":null,"previous_names":["king2088/simple-image-label"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/king2088%2Fsimple-image-label","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/king2088%2Fsimple-image-label/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/king2088%2Fsimple-image-label/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/king2088%2Fsimple-image-label/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/king2088","download_url":"https://codeload.github.com/king2088/simple-image-label/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245105669,"owners_count":20561567,"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":[],"created_at":"2024-10-28T21:42:24.833Z","updated_at":"2025-03-24T07:31:12.174Z","avatar_url":"https://github.com/king2088.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# simple-image-label\n\n[View English readme](README.md) | [查看中文版readme](README-zh.md)  \nsimple-image-label 采用JavaScript+html开发 , 支持YOLO坐标及VOC坐标，生成的坐标可用于目标检测及深度学习等。\n\n## 预览图\n\n![preview](preview.png)\n\n## 在你的项目中使用simple-image-label\n\n### 安装 simple-image-label\n```bash\n# npm\nnpm install simple-image-label -S\n# yarn\nyarn add simple-image-label\n# pnpm\npnpm add simple-image-label\n```\n#### 在JavaScript项目中使用\n\n```html\n\u003cdiv id=\"YourElementId\"\u003e\u003c/div\u003e\n```\n\n```js\n// 采用 require （ES5）\nconst SimpleImageLabel = require('../libs/simpleImageLabel').default\n// 采用 es6 \nimport SimpleImageLabel from '../libs/simpleImageLabel'\n// `el`必须使用id选择器\nconst simpleImageLabel = new SimpleImageLabe({\n    el: 'YourElementId', \n    imageUrl: 'yourImageUrl', \n    labels: [],\n    contextmenu: (e) =\u003e {\n        // 鼠标右键点击事件，可用于自定义右键菜单\n    },\n    labelClick: (label) =\u003e {\n        // 鼠标左键点击事件\n    },\n    error: (err) =\u003e {\n        // 错误回调\n        console.log(err);\n    }\n});\n```\n\n#### 在vue3中使用simple-image-label\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv id=\"YourElementId\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\nimport SimpleImageLabel from 'simple-image-label'\nimport { ref, onMounted } from 'vue';\nconst simpleImageLabel = ref(null);\nonMounted(() =\u003e {\n    simpleImageLabel.value = new SimpleImageLabel({\n        el: 'YourElementId'\n        imageUrl: props.imageUrl,\n        labels: props.labels,\n        contextmenu: (e) =\u003e {\n            emit('contextmenu', e)\n        },\n        labelClick: (label) =\u003e {\n            emit('labelClick', label)\n        },\n        error: (e) =\u003e {\n            emit('error', e)\n        }\n    });\n})\n\u003c/script\u003e\n```\n\n#### 在React中使用simple-image-label\n```jsx\nimport SimpleImageLabel from 'simple-image-label';\nimport img from './x.png'\nimport { useEffect } from 'react';\nconst ImageLabelComponent = () =\u003e {\n    let simpleImageLabel = null\n    useEffect(() =\u003e {\n        initSimpleDom()\n    }, [])\n    function initSimpleDom() {\n        simpleImageLabel = new SimpleImageLabel({\n            el: 'YourElementId',\n            imageUrl: img,\n            labels: [],\n            contextmenu: (e) =\u003e {\n                console.log(e);\n            },\n            labelClick: (label) =\u003e {\n                console.log(label);\n            },\n            error: (e) =\u003e {\n                console.log(e);\n            }\n        })\n    }\n    function getAllLabels() {\n        const labels = simpleImageLabel.getLabels()\n        console.log('labels', labels);\n    }\n    return (\n        \u003cdiv\u003e\n            \u003cdiv id=\"YourElementId\"\u003e\u003c/div\u003e\n            \u003cbutton onClick={getAllLabels}\u003eGet all labels\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\nexport default ImageLabelComponent;\n```\n\n\n## 对本项目进行 开发 \u0026 安装 \u0026 运行 demo\n\n安装依赖\n```bash\n# npm\nnpm install\n# yarn\nyarn\n# pnpm\npnpm install\n```\n\n运行\n```bash\n# npm\nnpm run start\n# yarn\nyarn start\n# pnpm\npnpm run start\n```\n\n打包\n```bash\n# npm\nnpm run build\n# yarn\nyarn build\n# pnpm\npnpm run build\n```\n\n## API\n\n### `SimpleImageLabel 选项`\n| 属性          | 类型       | 描述              |\n| ------------- | ---------- | ----------------- |\n| `el`          | `string`   | Html 元素的 id    |\n| `imageUrl`    | `string`   | 图片路径          |\n| `labels`      | `array`    | 默认的标签        |\n| `readOnly`    | `boolean`  | 开启/关闭只读模式 |\n| `contextmenu` | `function` | 鼠标右键点击事件  |\n| `labelClick`  | `function` | 鼠标左键点击事件  |\n| `error`       | `function` | 错误事件          |\n\n\n### `SimpleImageLabel 方法`\n| 方法                             | 参数         | 描述                                        |\n| -------------------------------- | ------------ | ------------------------------------------- |\n| `getLabels()`                    | -            | 获取所有标注                                |\n| `activeLabel()`                  | -            | 获取当前激活的标注                          |\n| `setImage(imageUrl)`             | `imageUrl`   | 设置图片                                    |\n| `setLabels(labels)`              | `labels`     | 设置标注                                    |\n| `getImageInfo()`                 | -            | 获取图片信息（当前图片真实宽高）            |\n| `getCoordinate(label)`           | `label`      | 获取标注坐标                                |\n| `getLabelsCoordinate()`          | -            | 获取所有标注的坐标                          |\n| `convertToYoloCoordinate(label)` | `label`      | 获取标注的YOLO坐标                          |\n| `getLabelsYoloCoordinate()`      | -            | 获取所有标注的YOLO坐标                      |\n| `setLabelActive(uuid)`           | `uuid`       | 根据uuid设置标注的激活状态                  |\n| `clearAllLabelActive()`          | -            | 清除所有标注的激活状态                      |\n| `removeAllLabels()`              | -            | 移除所有标注                                |\n| `removeLabelByUuid(uuid)`        | `uuid`       | 根据uuid移除一个标注                        |\n| `setLabelByUuid(uuid, attr)`     | `uuid, attr` | 根据uuid设置label信息. `attr`类型是`object` |\n| `getLabelByUuid(uuid)`           | `uuid`       | 根据uuid获取标注                            |\n| `setReadOnly(readOnly)`          | `readOnly`   | 设置只读模式.`readOnly`类型是`boolean`      |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fking2088%2Fsimple-image-label","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fking2088%2Fsimple-image-label","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fking2088%2Fsimple-image-label/lists"}