Hướng dẫn select area on image javascript - chọn khu vực trên javascript hình ảnh

Nếu bạn cần thêm trình soạn thảo hình ảnh mà không có đối tượng đã chọn:

1. Kết nối $ Toloka_assets/JS/Image-Annotation.js Thư viện (nhấp vào khối giao diện tác vụ trên trang dự án).

   
   in the Task interface block on the project page).

2. Bao gồm thành phần

   7
   8
   9 trong mã HTML của giao diện. Ví dụ:

   {{field type="image-annotation" name="result" src=image}}

   Để biết danh sách đầy đủ các tham số, xem bảng.

3. Thêm một trường để nhập một liên kết hình ảnh vào dữ liệu đầu vào.

4. Thêm trường

   0 với loại JSON trong dữ liệu đầu ra.json type in the output data.

Trường

[{"data":{"p1":{"x":0.472,"y":0.413},"p2":{"x":0.932,"y":0.877}},"type":"rectangle"},
{"data":[{"x":0.143,"y":0.807},{"x":0.317,"y":0.87},{"x":0.511,"y":0.145},{"x":0.328,"y":0.096},{"x":0.096,"y":0.554}],"type":"polygon"}] 

Các giá trị x và y là các số từ 0 đến 1. chiều dài và chiều rộng của hình ảnh được chụp là 1, với tâm tọa độ ở góc trên bên trái của hình ảnh.

Nếu bạn có hình ảnh với các đối tượng đã chọn và bạn muốn tải chúng lên tác vụ:

1. Kết nối $ Toloka_assets/JS/Image-Annotation.js Thư viện (nhấp vào khối giao diện tác vụ trên trang dự án). in the Task interface block on the project page).

2. Bao gồm

   7
   8
   4
   5 Thành phần trong mã HTML giao diện. Thí dụ:

   {{field type="image-annotation" name="result" src=image annotations=polygon}}

3. Thêm các mục sau trong dữ liệu đầu vào:

   • Một trường để nhập một liên kết hình ảnh.

   • Trường

     6 với loại JSON để vượt qua tọa độ của khu vực đã chọn.json type to pass the coordinates of the selected area.

4. Thêm trường

   0 với loại JSON trong dữ liệu đầu ra. Một trường để ghi kết quả là cần thiết cho thành phần này. Nếu Toloker chỉnh sửa khu vực đã chọn, tọa độ được cập nhật được ghi lại ở đó.json type in the output data. A field for recording results is required for this component. If the Toloker edits the selected area, the updated coordinates are recorded there.

5. Escape JSON với tọa độ điểm và thêm nó vào.

type

name

src

annotations

Thuộc tính cho trường dữ liệu đầu ra. Chứa tên trường đầu ra.

• URL hình ảnh. Các giá trị được hỗ trợ: closes a polygon connecting the first and last points with a line.

• URL từ dữ liệu đầu vào nhiệm vụ. Ví dụ: từ trường với ID

  9:

  {{field type="image-annotation" name="result" src=image}}

  0. deletes the selected point, selected object, or last point when creating a polygon.

• Đương dân trực tiêp. Giao thức HTTPS được khuyến nghị. Ví dụ,

  {{field type="image-annotation" name="result" src=image}}

  1.Alt pressed, they move it slower. With Alt+Shift pressed, they move it faster.

• Liên kết tương đối. moves from the selected point to the next one.

• Thuộc tính cho trường dữ liệu đầu vào. Chứa tên trường dữ liệu đầu vào. Tại đây bạn có thể cung cấp các tọa độ lựa chọn để chỉnh sửa thêm. Định dạng dữ liệu là một đối tượng JSON. moves from the selected point to the previous one.

Theo mặc định, bạn có thể sử dụng các phím tắt bàn phím sau trong tác vụ:

C Đóng một đa giác kết nối các điểm đầu tiên và cuối cùng với một dòng.

D xóa điểm đã chọn, đối tượng được chọn hoặc điểm cuối cùng khi tạo đa giác.

Mũi tên di chuyển điểm đã chọn. Với Alt nhấn, họ di chuyển nó chậm hơn. Với Alt+Shift nhấn, họ di chuyển nó nhanh hơn.

Tab di chuyển từ điểm đã chọn sang điểm tiếp theo.

Tab Shift+di chuyển từ điểm đã chọn sang điểm trước.

Nói với Tolokers về các phím tắt bàn phím trong việc tăng tốc độ hoàn thành nhiệm vụ.

Theo mặc định, công cụ đa giác được thêm vào.

Bạn có thể thay đổi bộ công cụ:

1. Để thêm một hình chữ nhật, hãy xóa bộ chọn CSS:

   5

2. Để ẩn một đa giác, hãy thêm bộ chọn CSS:

   • Để ẩn một hình chữ nhật, hãy thêm bộ chọn CSS:

   • Để sử dụng các chú thích, chèn một trong các ví dụ này vào khối JS:

Giải thích các ví dụ

• Để cho Toloker thêm một chú thích vào khu vực đã chọn hoặc chọn nó từ danh sách, bạn cần thêm phần tử giao diện vào tác vụ (ví dụ: trường văn bản hoặc danh sách thả xuống):

• Nhận đối tượng của trình soạn thảo

  {{field type="image-annotation" name="result" src=image}}

  2 và giao diện chú thích

  {{field type="image-annotation" name="result" src=image}}

  3 trong phương thức

  {{field type="image-annotation" name="result" src=image}}

  4:

• Đặt triển khai giao diện chú thích trong các phương thức:

• {{field type="image-annotation" name="result" src=image}}

  5 - gọi phần tử DOM của giao diện (được gọi một lần trong quá trình khởi tạo).

{{field type="image-annotation" name="result" src=image}}