图片标注
功能：提供了更多的工具，包括点、线、多边形、圆和椭圆(仅在此列表中支持圆和椭圆!)还可以添加对象和图像属性/标签。注释可以作为一个包含所有注释的JSON文件下载，也可以作为一个CSV文件下载，如果需要查看注释，还可以在之后上传。
项目管理：在数据集管理和用户方面没有什么先进的功能，但是它的界面是多边形注释最有效和最精确的界面之一，因为它允许您查看多边形的线条而不是其他任何内容。它们支持一些热键快捷方式，一般来说应用程序非常轻量级。
视频标注
本人以将其汉化，需要请留言
<template>
<div id="mark-label">
<div class="img-list-box">
<ul class="infinite-scroll">
<li v-for="item in dataList" :key="item.imgId">
<a-card hoverable style="width: 190px">
<template #cover>
<img alt="example" :src="item.imgPath" />
</template>
<a-card-meta :title="item.status_dictText">
<template #description>
<!-- <span :style='{display: 'block',width:'10px',height:'10px',borderRadius:'5px',color: item.status == 1 ? 'green' : 'red'}'></span> -->
</template>
</a-card-meta>
</a-card>
</li>
<div v-if="loading">正在加载中...</div>
</ul>
</div>
<div class="img-label-box">
<svg style="display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="shape_rectangle">
<rect width="18" height="14" x="3" y="5" stroke="rgb(149, 168, 190)" fill="none"/>
</symbol>
<symbol id="shape_extreme_rectangle">
<rect width="18" height="14" x="3" y="5" stroke="rgb(149, 168, 190)" fill="none"/>
<circle r="2" cx="3" cy="10" stroke="rgb(149, 168, 190)" fill="rgb(149, 168, 190)"/>
<circle r="2" cx="10" cy="19" stroke="rgb(149, 168, 190)" fill="rgb(149, 168, 190)"/>
<circle r="2" cx="15" cy="5" stroke="rgb(149, 168, 190)" fill="rgb(149, 168, 190)"/>
<circle r="2" cx="21" cy="14" stroke="rgb(149, 168, 190)" fill="rgb(149, 168, 190)"/>
</symbol>
<symbol id="shape_circle">
<circle r="9" cx="12" cy="12" stroke="rgb(149, 168, 190)" fill="none"/>
</symbol>
<symbol id="shape_extreme_circle">
<circle r="9" cx="12" cy="12" stroke="rgb(149, 168, 190)" fill="none"/>
<circle r="2" cx="3" cy="10" stroke="rgb(149, 168, 190)" fill="rgb(149, 168, 190)"/>
<circle r="2" cx="19" cy="6" stroke="rgb(149, 168, 190)" fill="rgb(149, 168, 190)"/>
<circle r="2" cx="16" cy="20" stroke="rgb(149, 168, 190)" fill="rgb(149, 168, 190)"/>
</symbol>
<symbol id="shape_ellipse">
<ellipse rx="10" ry="8" cx="12" cy="12" stroke="rgb(149, 168, 190)" fill="none"/>
</symbol>
<symbol id="shape_point">
<circle r="3" cx="12" cy="12" stroke="rgb(149, 168, 190)" fill="rgb(149, 168, 190)"/>
</symbol>
<symbol id="shape_polygon">
<path d="M 4 12 L 10 2 L 20 6 L 18 16 L 8 20 z" stroke="rgb(149, 168, 190)" fill="none"/>
</symbol>
<symbol id="shape_polyline">
<line x1="3" y1="4" x2="8" y2="18" stroke="rgb(149, 168, 190)" fill="none"/>
<line x1="8" y1="18" x2="14" y2="6" stroke="rgb(149, 168, 190)"/>
<line x1="14" y1="6" x2="20" y2="14" stroke="rgb(149, 168, 190)"/>
<circle r="2" cx="3" cy="4" stroke="rgb(149, 168, 190)"/>
<circle r="2" cx="8" cy="18" stroke="rgb(149, 168, 190)"/>
<circle r="2" cx="14" cy="6" stroke="rgb(149, 168, 190)"/>
<circle r="2" cx="20" cy="14" stroke="rgb(149, 168, 190)"/>
</symbol>
<symbol id="shape_line">
<line x1="6" y1="6" x2="19" y2="19" stroke="rgb(149, 168, 190)"/>
<circle r="2" cx="6" cy="6" stroke="rgb(149, 168, 190)"/>
<circle r="2" cx="19" cy="19" stroke="rgb(149, 168, 190)"/>
</symbol>
<symbol id="micon_settings">
<path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
</symbol>
<symbol id="micon_save">
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
</symbol>
<symbol id="micon_open">
<path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
</symbol>
<symbol id="micon_upload">
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
</symbol>
<symbol id="micon_download">
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/>
</symbol>
<symbol id="micon_zoomin">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
<path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>
</symbol>
<symbol id="micon_zoomout">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/>
</symbol>
<symbol id="micon_search">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</symbol>
<symbol id="micon_fit_screen">
<path d="M17 4h3c1.1 0 2 .9 2 2v2h-2V6h-3V4zM4 8V6h3V4H4c-1.1 0-2 .9-2 2v2h2zm16 8v2h-3v2h3c1.1 0 2-.9 2-2v-2h-2zM7 18H4v-2H2v2c0 1.1.9 2 2 2h3v-2zM18 8H6v8h12V8z"/>
</symbol>
<symbol id="micon_delete">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
</symbol>
<symbol id="micon_copy">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</symbol>
<symbol id="micon_paste">
<path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/>
</symbol>
<symbol id="micon_insertcomment">
<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
</symbol>
<symbol id="micon_edit">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</symbol>
<!-- File Manager -->
<symbol id="micon_lib_add">
<path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9h-4v4h-2v-4H9V9h4V5h2v4h4v2z"/>
</symbol>
<symbol id="micon_add_circle">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
</symbol>
<symbol id="micon_remove_circle">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/>
</symbol>
<symbol id="micon_navigate_next">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</symbol>
<symbol id="micon_navigate_prev">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</symbol>
<symbol id="micon_search">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</symbol>
<!-- Import/Export -->
<symbol id="micon_import">
<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
</symbol>
<symbol id="micon_export">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</symbol>
<symbol id="micon_import_export">
<path d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"/>
</symbol>
<!-- composed by Abhishek Dutta from existing materian icons, 31 Jan. 2019 -->
<symbol id="micon_add_image">
<path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3z"/>
<path transform="translate(-9,-12) scale(1.8 1.8)" d="M5 19l3-4 2 3 3-4 4 5H5z"/>
</symbol>
<!-- composed by Abhishek Dutta from existing materian icons, 31 Jan. 2019 -->
<symbol id="micon_add_media">
<path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3z"/>
<path transform="translate(-10,-7) scale(1.6 1.6)" d="M10 16.5l6-4.5-6-4.5v9z"/>
</symbol>
<!-- composed by Abhishek Dutta from existing materian icons, 31 Jan. 2019 -->
<symbol id="micon_add_audio">
<path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3z"/>
<path transform="translate(-11,-4) scale(1.4 1.4)" d="M8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
</symbol>
<!-- composed by Abhishek Dutta from existing materian icons, 13 May. 2019 -->
<symbol id="micon_add_remote">
<path d="M4.5 11h-2V9H1v6h1.5v-2.5h2V15H6V9H4.5v2zm2.5-.5h1.5V15H10v-4.5h1.5V9H7v1.5zm5.5 0H14V15h1.5v-4.5H17V9h-4.5v1.5zm9-1.5H18v6h1.5v-2h2c.8 0 1.5-.7 1.5-1.5v-1c0-.8-.7-1.5-1.5-1.5zm0 2.5h-2v-1h2v1z"/>
</symbol>
<symbol id="micon_share">
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
</symbol>
<!-- Video player controls -->
<symbol id="micon_play">
<path d="M8 5v14l11-7z"/>
</symbol>
<symbol id="micon_pause">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
</symbol>
<symbol id="micon_mark_start">
<path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
</symbol>
<symbol id="micon_mark_end">
<path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
</symbol>
<!-- Temporal Segments -->
<symbol id="micon_add">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</symbol>
<!-- Help -->
<symbol id="micon_help">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</symbol>
<symbol id="micon_import_export">
<path d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"/>
</symbol>
<!-- Restore -->
<symbol id="micon_restore_load">
<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-2 16c-2.05 0-3.81-1.24-4.58-3h1.71c.63.9 1.68 1.5 2.87 1.5 1.93 0 3.5-1.57 3.5-3.5S13.93 9.5 12 9.5c-1.35 0-2.52.78-3.1 1.9l1.6 1.6h-4V9l1.3 1.3C8.69 8.92 10.23 8 12 8c2.76 0 5 2.24 5 5s-2.24 5-5 5z"/>
</symbol>
<symbol id="micon_restore_save">
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/>
</symbol>
<symbol id="micon_keyboard">
<path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"/>
</symbol>
</defs>
</svg>
<!-- VIA Information Pages -->
<div id="via_page_container">
<div data-pageid="page_import_export" class="via_page">
<div class="toolbar"><span onclick="_via_util_page_hide()" class="text_button">×</span></div>
<h2>Export</h2>
<ul>
<li>Select Export Format:
<select id="via_page_export_format">
<option value="via3_csv">VIA3 (CSV)</option>
<option value="temporal_segments_csv">Only Temporal Segments as CSV</option>
<option value="coco">COCO</option>
</select>
</li>
</ul>
<h2>Import</h2>
<ul>
<li>VIA Shared Project: <input id="via_page_import_pid" type="text" placeholder="e.g. 71578187-3cd3-45d0-8198-7c441fbc06af" style="width:25em;"/>
</li>
<li>VIA2 project created (json file):
<input id="via_page_import_via2_project_json" type="file"/>
</li>
</ul>
<div class="controls">
<button id="via_page_button_import" onclick="_via_util_page_process_action(event)">Import</button>
<button id="via_page_button_export" onclick="_via_util_page_process_action(event)">Export</button>
<button onclick="_via_util_page_hide()">Cancel</button>
</div>
</div>
<div data-pageid="page_fileuri_bulk_add" class="via_page">
<div class="toolbar"><span onclick="_via_util_page_hide()" class="text_button">×</span></div>
<p>文件类型: <select id="via_page_fileuri_filetype">
<option value="2" selected>图片</option>
<option value="4">视频</option>
<option value="8">音频</option>
<option value="0">自动检测</option>
</select>
</p>
<h2>Paste File URI (one URI per line)</h2>
<textarea id="via_page_fileuri_urilist" placeholder="For example, (1) http://www.robots.ox.ac.uk/~vgg/software/via/images/via_logo.png ; (2) file:///data/images/img001.jpg ; (3) file:///C:/Documents%20and%20Settings/tlm/video001.mp4" rows="10" cols="80"></textarea>
<h2>Import URI from a File</h2>
<input id="via_page_fileuri_importfile" type="file"/>
<div class="controls">
<button id="via_page_fileuri_button_bulk_add" onclick="_via_util_page_process_action(event)">Add</button>
<button onclick="_via_util_page_hide()">Cancel</button>
</div>
</div>
<div data-pageid="page_share_not_shared_yet" class="via_page">
<div class="toolbar"><span onclick="_via_util_page_hide()" class="text_button">×</span></div>
<h2>Sharing this Project</h2>
<p>This project has not been shared yet. If you want to share this project with others and allow them to contribute to this VIA project, click <svg class="svg_icon" viewbox="0 0 24 24"><use xlink:href="#micon_upload"/></svg> button in the toolbar.</p>
<h2>Loading a Shared Project</h2>
<p>A unique project-id is assigned to every shared VIA project. You must have received such a unique project-id when someone asked you to contribute to a VIA project. Click <svg class="svg_icon" viewbox="0 0 24 24"><use xlink:href="#micon_download"/></svg> button in the toolbar to open a shared project.</p>
<p>If you do not have access to a shared project-id and you can explore the following publicly shared demonstration projects:
<ul>
<li>Image Annotation: 42be7c9f-f305-49f9-8de1-3717459b1306</li>
</ul>
</p>
<div class="controls">
<button onclick="_via_util_page_hide()">Close</button>
</div>
</div>
<div data-pageid="page_share_already_shared" class="via_page">
<div class="toolbar"><span onclick="_via_util_page_hide()" class="text_button">×</span></div>
<p style="color:red;">This feature is not stable yet. If you encounter any issues, please <a href="https://gitlab.com/vgg/via/issues">report</a> it.</p>
<h3>Information about this shared project</h3>
<p id="via_page_share_project_info"></p>
<h3>How can others contribute to this project?</h3>
<p>This project has already been shared and therefore anyone can contribute to this project. To contribute to this project, other users should to follow these steps:
<ol>
<li>Open the VIA application (version 3.0.3 or higher) in a web browser.</li>
<li>Click <svg class="svg_icon" onclick="" viewbox="0 0 24 24"><use xlink:href="#micon_download"/><title>Share this project and your updates with others</title></svg> button in the top toolbar.</li>
<li>Enter the following project-id: <span id="via_page_share_project_id"></span></li>
<li>Make changes to the project and click <svg class="svg_icon" viewbox="0 0 24 24"><use xlink:href="#micon_upload"/></svg> to share your updates with others.</li>
</ol>
</p>
<h3>Important Notes</h3>
<ul>
<li>Do not store private or confidential information in a shared VIA project. Furthermore, be careful when you share your project-id with others as it allows them to make any changes to your project.</li>
<li>The VIA servers do not maintain backup copy of the shared VIA projects. In the event of disk failure, all data will be lost. So, we strongly advise you to always keep a local copy of your project data.</li>
<li>We <strong>cannot guarantee</strong> 24/7 availability of VIA project share servers. In the event of hardware or disk failure, the VIA project share servers will be offline for an extended period of time.</li>
<li>This VIA share feature should <strong>not</strong> be used for large scale collaborative annotation projects. For such use cases, we advise you to setup a dedicated server with sufficient backup and secutiry.</li>
<li>The shared VIA project should not exceed 1MB in size.</li>
</ul>
<div class="controls">
<button onclick="_via_util_page_hide()">Close</button>
</div>
</div>
<div data-pageid="page_share_open_shared" class="via_page">
<div class="toolbar"><span onclick="_via_util_page_hide()" class="text_button">×</span></div>
<h2>Open a Shared VIA Project</h2>
<p>A unique project-id is assigned to every shared VIA project. For example, the following two project-id have been publicly shared for demonstration purposes:
<ul>
<li>Image Annotation: 42be7c9f-f305-49f9-8de1-3717459b1306</li>
</ul>
</p>
<p>To open a shared project, enter the project-id below:</p>
<table>
<tr>
<td><label for="via_page_input_pid">VIA Project Id</label></td>
<td>
<input style="width:25em;" type="text" placeholder="e.g. e302eadf-aa53-4a5a-b958-11175692c928" id="via_page_input_pid"/>
</td>
</tr>
</table>
<div class="controls">
<button id="via_page_button_open_shared" onclick="_via_util_page_process_action(event)">Open Shared Project</button>
<button onclick="_via_util_page_hide()">Cancel</button>
</div>
</div>
<div data-pageid="page_demo_instructions" class="via_page">
<div class="toolbar"><span onclick="_via_util_page_hide()" class="text_button">×</span></div>
<h1>Some Quick Tips</h1>
<ul>
<li>Click and drag mouse cursor to define a region around an object.</li>
<li>Use the <span class="text_button" onclick="via.editor.show()">attribute editor</span> to define or update attributes (e.g. name, colour, etc) of user defined regions.</li>
</ul>
</div>
<div data-pageid="page_keyboard_shortcut" class="via_page">
<div class="toolbar"><span onclick="_via_util_page_hide()" class="text_button">×</span></div>
<h1>快捷键</h1>
<table>
<thead>
<tr>
<th>说明</th>
<th>按键</th>
</tr>
</thead>
<tbody>
<tr><td>上一张/下一张</td><td><span class="key">n</span> / <span class="key">p</span></td></tr>
<tr><td>选中标注上下左右移动</td><td><span class="key">Shift</span> + <span class="key">←</span> / <span class="key">→</span> / <span class="key">↑</span> / <span class="key">↓</span></td></tr>
<tr><td>删除</td><td><span class="key">Backspace</span> or <span class="key">Delete</span></td></tr>
<tr><td>选中所有</td><td><span class="key">Ctrl</span> + a</td></tr>
<tr><td>显示隐藏标注框</td><td><span class="key">b</span></td></tr>
<tr><td>切换区域标签的可见性</td><td><span class="key">l</span></td></tr>
<tr><td>切换放大镜</td><td><span class="key">m</span></td></tr>
<!-- <tr><td>通过不同的放大率循环</td><td><span class="key">M</span></td></tr> -->
<tr><td>放大/缩小/还原</td><td><span class="key">+</span>, <span class="key">-</span> or <span class="key">=</span></td></tr>
</tbody>
</table>
<p> </p>
</div>
<div data-pageid="page_about" class="via_page">
<pre>。。。</pre>
</div>
</div> <!-- end of page container -->
<!-- used by _via_view_annotator._show_start_info() -->
<div id="via_start_info_content" class="hide">
<ul>
<li>要开始对图像、音频和视频进行注释，请选择 本地 文件或 添加文件 （使用 file:// 的本地文件和使用 http:// URI 的远程文件）。您还可以批量添加文件 URI 列表 bulk。</li>
<li>按 空格 键可随时播放或暂停音频或视频（更多键盘 快捷键 ）。</li>
<li>暂停视频时，可以为图像和视频帧定义空间区域（例如 50x80 像素的矩形边界框）。可以为音频和视频文件定义时间片段（例如，从时间 3.1 秒到 12.5 秒的视频片段）。</li>
<li>使用 属性编辑器 定义或更新用户定义区域的属性（例如名称、颜色等）。</li>
<li>您还可以尝试预加载图像 image， 音频 和 视频 注释的演示。</li>
</ul>
</div>
<div class="via_container" id="via_container"></div>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import {onMounted,nextTick,reactive,onUnmounted,ref} from 'vue'
import { getMarkInfo, getMarkLabeledInfo, queryMarkImgPageList, saveMarkInfo } from '/@/views/task/myTask/TaskMark.api';
const dataList =ref([])
const currentPage =ref(1)
const pageSize =ref(10)
const loading = ref(false)
const { currentRoute } = useRouter();
const state = reactive({
isCheck:false, //是否调用自动识别
taskId: currentRoute.value.query.id,
subId: currentRoute.value.query.subId,
})
const loadData = async () => {
loading.value = true // 开始加载数据
const params = {
pageNo: currentPage.value,
pageSize: pageSize.value,
status: 1,
subTaskId:state.subId,
}
const {records} = await queryMarkImgPageList(params)
dataList.value = [...dataList.value, ...records] // 将数据添加到列表中
currentPage.value++ // 增加页码
loading.value = false // 加载完成
}
const handleScroll = () => {
// 监听滚动事件
const container = document.querySelector('.infinite-scroll') // 获取滚动容器
const { scrollTop, scrollHeight, clientHeight } = container // 获取滚动高度和内容高度
if (scrollTop + clientHeight >= scrollHeight && !loading.value) {
loadData() // 滚动到底部，加载更多数据
}
}
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
onMounted(() => {
nextTick(()=>{
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
const loadJs = ['_via_demo_image_annotator.js','_via_util.js','_via_const.js','_via_config.js','_via_event.js','_via_control_panel.js','_via_metadata.js','_via_file.js','_via_attribute.js','_via_view.js','_via_data.js','_via_share.js','_via_import_export.js','_via_video_thumbnail.js','_via_file_annotator.js','_via_temporal_segmenter.js','_via_view_annotator.js','_via_view_manager.js','_via_editor.js','_via_debug_project.js','_via.js']
let nums = 0
loadJs.forEach(item=>{
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = `/js/${item}`;
document.body.appendChild(script);
script.onload = () => {
nums++
if(nums == 21){
var via_container = document.getElementById('via_container');
var via = new _via(via_container);
window.onresize = () => {
return (() => {
via._hook_on_browser_resize()
})();
};
}
}
})
handleScroll()
})
});
</script>
<style lang="less">
#mark-label{
width: 100%;
height: 100%;
background: rgb(227, 233, 240);
display: flex;
flex-direction: row;
.img-list-box{
width: 200px;
height: 100%;
background: #fff;
ul{
li{
padding: 8px;
}
}
}
.img-label-box{
flex: 1;
}
}
[data-theme='dark']{
.via_container,#editor_container{
background-color:#2d2d2d;
}
}
@import './via.less';
</style>
