ImageCropper

label・alt・src と、元画像の実寸 imageWidth・imageHeight を渡します。見出しは Section と同じ赤い通常の太さの15pxの文字です。淡い灰色の台（#f9f9f9、1px #e5e5e5 の枠）の上に、元画像と同じ縦横比の表示面（1px #ccc の枠）を置き、その上に白い2pxの枠で切り抜く範囲を重ねます。範囲の外は半透明の黒で覆って暗くします。枠はドラッグで移動し、末尾側の下の角にある、2pxの青緑の枠の小さな白い四角（14px、下に1pxの影）のハンドルで大きさを変えます。調整のスライダーは表示面の末尾側の列に並べ、置き場所の幅が40rem未満では表示面の下へ移します。拡大率のスライダーと、「位置と大きさを細かく調整」の中の横・縦の位置、幅・高さのスライダーも同じ値に合わせて動きます。

value の位置と大きさは表示面に対するパーセント（x・y・width・height）、zoom は1〜5の拡大率、offsetX・offsetY は拡大した画像のずれです。範囲外の値は端に丸めます。有限でない数、正の整数でない実寸を渡すと RangeError を投げます。

src を渡さなければ画像なしの枠と emptyLabel を出し、controllerは付けません。disabled は枠とスライダーを全て止めます。

送信する値は持ちません。枠を動かすと image-cropper:change を発火して新しい範囲を渡すので、利用側がこれを受けて隠し欄に入れるか、保存の処理へ渡します。detailの sourceRect は元画像の幅と高さを1とした範囲（左上が原点、書く向きによらない）で、そのまま切り抜きに使えます。切り抜いた画像の生成・保存は利用側で行います。

ImageCropperController が接続するまで、ハンドルと調整の欄は出さず、初めの範囲で切り抜いた画像だけを見せます。JavaScriptが無い時は、この見本のままで範囲は変えられません。