Image Cropper

矩形の切り抜き範囲（crop rect）を選択させる部品です。表示画像上に選択枠と方位別ハンドルを重ね、選択範囲の x/y/width/height を値として保持します。canvas による実際のピクセル切り出し（画像処理）は本部品のスコープ外で、利用者側の責務です。

fandhe-frontend-headless-ui の image_cropper mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。Themes 版が備える見た目は持たず、anatomy・ARIA・data-* のみを提供します。CSS は利用者が当てます。

スタイル済みの表示例は Image Cropper を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Features

root/viewport/image/selection/handle/grid の anatomy を持ち、矩形の crop 範囲（x/y/width/height）を値として保持する（image_cropper.rs:1-9）。
root は role="group" + aria-roledescription="image cropper" を固定付与する（image_cropper.rs:116-117, 438-449）。
handle は focusable（tabindex="0"）+ 方位別の静的 aria-label（例: "Resize from bottom right"）を出力する（image_cropper.rs:117-119, 214, 475-488）。
canvas による実際のピクセル切り出し（画像処理）は本モジュールのスコープ外であり、crop 矩形の値を返すのみである（image_cropper.rs:30-31, 140-144）。

Anatomy

root
  viewport
    image
  selection
    handle
  grid

API Reference

Arguments

Name	Type	Description
image(src, alt)	&str, &str	対象画像の src/alt。既定エスケープを経由して出力される。
handle(position)	HandlePosition	方位（N/S/E/W/NE/NW/SE/SW）。方位別の静的 aria-label を出力する（image_cropper.rs:214, 475-488）。
attrs / children	Vec<(&str, &str)> / Vec<Node>	各パーツ共通の追加属性・子ノード（代表 1 行に集約）。

Data Attributes

Part	Attribute	Observed Values
handle	data-handle-position	e, n, s, w

Examples

Two-handle selection

NE/SW の 2 ハンドルのみを持つ選択枠の組み立て例です。

role="group" の root と方位別 aria-label を持つ 2 個の handle の組み立て例です。

Accessibility

Keyboard Interactions

Key	Description
Tab	handle パーツは tabindex="0" で focusable である（実際のキーボード nudge の DOM 配線は wasm-full 側の後続責務、image_cropper.rs:475-479, 140-148）。

WAI-ARIA

Attribute	Description
role="group" / aria-roledescription	root パーツへ "image cropper" を固定付与する（image_cropper.rs:444-449）。
aria-label	handle パーツへ方位別の静的文字列（例: "Resize from bottom right"）を固定付与する（image_cropper.rs:214, 481-483）。