画像1枚とプリセット
本ツールは，ユーザーが選択した画像1枚を対象として，特定のSNSプラットフォームに適した縦横比および画素数へ切り抜く（クロップする）ためのインターフェースを提供します．ユーザーがファイル入力フォームまたはドラッグ＆ドロップ領域を通じて画像ファイル（PNG，JPEG，WebPなど，利用中のブラウザがデコード可能な形式）を選択すると，FileReader APIのreadAsDataURLメソッドによってデータURIスキームとして読み込まれ，Reactのステートに保持されます．
この仕組みにより，入力された画像データの変換処理はブラウザ内で実行されます．ツール内には現在，主要な用途に対応した5つの固定プリセットが用意されています．具体的には，16:9の比率を持つ「YouTube サムネイル（1280×720）」および「X (旧Twitter) ポスト画像（1200×675）」，正方形である「Instagram フィード（1080×1080）」，ヘッダー用の横長な「X (旧Twitter) ヘッダー（1500×500）」，そして縦長動画向けの「TikTok / リール / ストーリーズ（1080×1920）」です．
これらはあらかじめ定義されたアスペクト比と出力用の幅・高さ（ピクセル単位の画素数）を持っており，ユーザーがリストからいずれかのプリセットを選択することで，後続のプレビュー描画や最終的な書き出しの基準となるキャンバスの寸法が決定されます．一括処理機能は実装されていないため，ファイルは1回の操作につき1枚のみアップロード可能であり，新しいファイルを選択すると以前の画像ステートは上書きされる仕様となっています．
coverと切れる範囲
選択されたプリセットの縦横比に対して，アップロードされた元の画像の縦横比が一致しない場合，ツールは初期状態で対象枠の全体を覆うように画像を描画する「cover（カバー）」の考え方に基づくスケーリング計算を行います．プレビュー用のCanvasは，UI上の視認性を確保するために幅を480ピクセルに固定しており，選択中のプリセットのアスペクト比で割り算を行うことで高さを算出します（この際，JavaScriptのMath.round関数による丸め処理が行われるため，実際のプリセットサイズとプレビューの高さには微小な端数差異が生じ得ます）．
画像の描画スケールは，プレビュー枠の幅に対する元画像幅の比率と，プレビュー枠の高さに対する元画像高さの比率のうち，大きい方を採用するMath.max関数の式で決定されます．これにより，初期倍率（ズーム100%時）においては，画像の短辺がキャンバスの枠にピッタリと合い，長辺側の一部がキャンバス領域外にはみ出す状態となります．
このはみ出した領域が「切れる範囲」であり，最終的なPNG出力時にも描画されない部分となります．例えば，横長の画像を正方形のプリセット（Instagram フィード等）に当てはめた場合，画像の上下は枠に収まりますが，左右の端はキャンバス外に押し出され切り落とされる対象となります．
AIを用いた自動被写体認識や，背景を自動的に生成して補完するような機能は実装されていないため，切れる範囲に重要なテキストや人物の顔などが含まれている場合は，次章で解説するズームや位置調整のスライダーを用いて，手動で描画領域をキャンバス内に収める操作が必要となります．
ズームと位置の関係
画像がキャンバスのどの領域に描画されるかは，ユーザーが操作する「ズーム（拡大率）」「左右の配置（X位置）」「上下の配置（Y位置）」という3つのスライダーの値によって動的に計算されます．ズームスライダーは50%から200%までの範囲を1%刻みで調整可能であり，前章で算出されたcover基準のスケール値に対して，パーセンテージの係数を掛け合わせることで最終的な描画スケールを決定します．
ズームを100%より大きくすると画像はさらに拡大され，切れる範囲が広がります．逆に100%未満（最小50%まで）に設定すると画像全体が縮小され，枠を覆えなくなる方向に白い余白が生じる場合があります．画像の描画開始座標（XおよびY）は，単純な絶対ピクセル指定ではなく，キャンバスの寸法と描画される画像寸法の「差分（残り幅・残り高さ）」に対するパーセンテージとして算出されます．
具体的には，キャンバス幅からスケール適用後の画像幅を引いた残り幅を求め，これにX位置のパーセンテージを掛けた値が描画のX座標となります．Y座標についても同様に残り高さを用いて計算されます．この計算モデルの特性上，画像がキャンバスより大きい状態（ズーム100%以上など）では，残り幅や高さがマイナスの値となるため，オフセットのパーセンテージを増やすと描画開始座標はマイナス方向に移動し，画像は相対的に左や上へシフトします．
逆に画像がキャンバスより小さい状態（ズーム縮小時）では，残り幅がプラスとなるため，パーセンテージを増やすと画像は右や下へシフトするという逆の視覚的挙動を示します．
具体的な中央・端寄せ手順
前章の計算ロジックを踏まえ，意図した通りに画像を中央や端に配置するための具体的な操作手順を解説します．画像をキャンバスの正確な中心に配置したい場合は，X位置およびY位置のスライダーを初期値である「50%」に設定します．これにより，前述の残り幅と残り高さに0.5が掛けられるため，画像のはみ出し量，または余白の量が上下・左右で均等に二等分され，計算上，中央揃えになります．
一方，画像の右端をキャンバスの右端にピッタリと合わせたい場合は，X位置のスライダーを「100%」に振り切ります．これにより描画X座標は残り幅（キャンバス幅から画像幅を引いた値）と完全に一致し，画像の右辺がキャンバスの右枠にスナップする状態になります．同様に，画像を左端に合わせたい場合はX位置を「0%」に設定することで描画開始のX座標が0となり，キャンバスの左上端を起点として描画が開始されます．
上下の調整も同様で，画像の上端を見せたい場合はY位置を「0%」，下端を見せたい場合は「100%」に設定します．特に注意すべき点として，ズームを50%などに縮小し，画像全体がキャンバスより小さくなった状態で右下に配置したい場合は，X位置100%，Y位置100%に設定することで，生成された白い余白の右下隅へ画像を寄せる動作となります．
これらのパーセンテージベースの配置アルゴリズムにより，ユーザーはピクセル単位の複雑な座標計算を行うことなく，直感的なスライダーのドラッグ操作のみで，切り抜き枠に残る範囲を確認できます．投稿先のセーフエリアを検出する機能ではありません．
PNGと元画像の画素数
画像の調整が完了し「切り抜きを保存」ボタンが押下されると，画面表示用のプレビューキャンバスとは別に，実際の書き出し専用となる表示しない書き出し用Canvas要素が内部で動的に生成されます．この出力用キャンバスの寸法は，第1章で選択したプリセットが持つ固有の画素数（例：YouTubeサムネイルなら1280ピクセル×720ピクセル）が直接適用されます．
書き出し処理では，プレビュー時と全く同じスケール計算およびオフセット計算のロジックが用いられますが，ベースとなる枠の幅と高さが出力用の大きなピクセル数に置き換わるため，入力された元画像が持つ本来の解像度情報ができる限り維持された状態で再描画されます．ただし，元画像の解像度がプリセットの要求するピクセル数（例えば1500×500など）よりも著しく低い場合，CanvasのdrawImageメソッドによって強制的に引き伸ばされるため，ピクセルの補間処理によるぼやけや劣化が発生します．
品質の劣化を完全に防ぐ魔法のような機能はありません．描画が完了したCanvasの内容は，ブラウザ標準のtoDataURLメソッドを介して，MIMEタイプ「image/png」のデータURIスキームへエンコードされます．この処理において，JPEG形式での圧縮保存や画質・ファイルサイズの細かな調整パラメータを指定することはできず，出力結果は常に可逆圧縮のPNGファイルとなります．
そのため，大きなプリセットサイズを選択した場合，生成されるPNG画像のファイルサイズは数メガバイトに達することがあり，アップロード先となる各プラットフォームのファイル容量制限に抵触しないか事前に留意する必要があります．
投稿先仕様と白余白の確認
最終的なPNG画像を出力する前，あるいは出力した後に，対象となるSNSプラットフォームの最新の投稿仕様と照らし合わせて結果を確認することが重要です．本ツールは画像の背景（何も描画されていない透過部分や，ズーム縮小によって生じた余白）に対して，CanvasのfillRectメソッドを用いて「#ffffff（カラーコード：白）」を強制的に塗りつぶす仕様となっています．
そのため，透明な背景を持つ透過PNGや透過WebPをアップロードした場合でも，透過部分はすべて白背景に変換された状態でPNGとして出力されます．ダークモードでSNSを利用しているユーザーのタイムライン上で，この白い余白が意図せず目立ってしまうケースがあるため，ズームスライダーを100%未満に設定して意図的な余白を作る際は，視覚的なコントラストに十分注意を払う必要があります．
また，ツールに組み込まれている5つの固定プリセットは，本ツールの固定値として設定されていますが，UIの警告メッセージにも記載がある通り，公式の最新仕様を永続的に保証するものではありません．SNS側でレイアウト変更が行われた場合や，ユーザーが閲覧するデバイス（パソコン，スマートフォン，タブレット）の画面幅によってプレビュー時のトリミング挙動が異なる場合があります．
そのため，本ツールで生成した画像を本番のプラットフォームにアップロードする際は，必ず各SNSアプリ側で提供されている投稿前のプレビュー機能を用いて再度確認し，テキストやロゴなどの重要な要素が見切れていないか最終チェックを行う手順を強く推奨します．