圖片多邊形標註 jquery.annotation.js

即時互動體驗區 (Live Interactive Demo)

滑鼠單擊 (Click) 連線標註，連點兩下 (Double Click) 閉合多邊形

下方為 4 組獨立的 Canvas 標註畫布，可在任一圖片上開始繪製。

標註畫布 #1

標註畫布 #2

標註畫布 #3

標註畫布 #4

多邊形頂點路徑回傳 (after_func Output JSON) 等待操作中

// 在任一畫布上點擊繪製，連點兩下 (Double Click) 結束後將在此即時顯示多邊形座標路徑...

快速開始程式碼範例

載入 jQuery 與 jquery.annotation.js 即可對容器元素啟用圖片多邊形標註：

<script src="jquery.min.js"></script>
<script src="jquery.annotation.js"></script>

<div id="myAnnotation"></div>

<script>
$(document).ready(function(){
  $('#myAnnotation').annotation({
    image: 'https://example.com/image.jpg',
    editable: true,
    after_func: function(canvasId, annotations) {
      console.log('Canvas DOM ID:', canvasId);
      console.log('多邊形路徑頂點:', annotations);
      // annotations 格式: [{ path: [{x: 50, y: 30}, {x: 120, y: 90}, ...], text: '' }]
    }
  });
});
</script>

參數手冊與 3WA 改版重點

參數 / 功能	說明
`image`	標註底圖之圖片網址 (URL / 路徑)。
`editable`	`true / false` ，是否允許使用者點擊標註。
`after_func`	框選結束時觸發，回傳 (canvasId, annotations)。
`annotationsJSON`	預先載入現有標註路徑 JSON 字串進行呈現。
3WA 優化 1	徹底移除 jquery.qtip 相依性，純原生 Canvas 零負擔。
3WA 優化 2	增強 after_func，回傳動態 Canvas ID 與閉合頂點陣列。