画像を3カラムに等分するツールを追加 - #89
Open
aks-fujisawa wants to merge 12 commits into
Open
Conversation
/image-splitter に、ドラッグで切り抜き範囲を調整できる簡易トリミング機能付きの 画像3分割ツールを追加。X等での3分割投稿向けに、選択した範囲を縦3等分して それぞれ個別にダウンロードできる。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- 四隅ハンドルの中心が角からずれるバグを修正（right/bottom側は translate の符号が逆でないと角に重ならない） - 切り抜き範囲外の暗い表示を、画面全体に伸びる box-shadow から 範囲外だけを覆う4枚の帯（pointer-events: none）に変更し、他の UIを隠したりクリックを妨げたりしないようにした - 切り抜き中も3分割の境界線をガイドとして表示 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
- スマホでは範囲移動とコーナーリサイズの判定がシビアになるため、 範囲全体を掴んで移動する操作を廃止し、四隅ハンドルのリサイズのみに した（CropArea は pointer-events: none、ハンドルのみ auto） - 「元画像の縦横比を固定する」チェックボックスを追加。ONにすると 現在の切り抜き範囲を元画像と同じ比率に内接させ、以後のリサイズも その比率を保ったまま行われる - moveRect は未使用になったため削除 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
コーナーのリサイズしか操作がなくなったため、各ハンドルへの個別の pointerdown 判定はやめ、Stage 全体で pointerdown を受けて現在の 切り抜き矩形の四隅のうちタップ位置に一番近いものを操作対象にする ようにした（nearestCorner）。見た目のハンドルは装飾のみになり、 画像内のどこを押しても必ずいずれかの角が反応する。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
canvas.toDataURL() は PNG バイト列を base64 文字列にして React state / DOM にそのまま抱えることになり、写真サイズだと数MB単位でメモリを圧迫 していた。canvas.toBlob() + URL.createObjectURL() に切り替え、バイナリ のまま保持して短い URL 文字列だけを扱うようにした。 - 新しい分割結果に置き換わる／画像変更・リセットで結果がクリアされる タイミングで、直前の Object URL を revokeObjectURL するクリーンアップ effect を追加 - toBlob は非同期のため、分割中は多重クリックを防ぐ isSplitting 状態 を追加し、ボタンラベルも「分割中…」に切り替える Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
ImageSplitterScene をトリミング用の状態管理・イベント処理のみを持つ オーケストレーターとし、UIは ImageTrimScene（画像選択〜切り抜き〜 「3分割する」まで）と ImageSplitResultScene（分割結果のダウンロード 一覧）に分離した。 - 「3分割する」完了後は columnImages の有無で表示を出し分け、 トリミング側のUI（説明文・画像選択・Stage・縦横比ロック・ツール バー）は非表示になり、ダウンロード専用のシーンだけが表示される - ダウンロードシーンの末尾に「もどる」を追加し、押すとトリミングの 状態（画像・切り抜き範囲）を保持したままトリミングシーンに戻る - 各シーンは props 経由でのみ状態・コールバックを受け取る見た目 コンポーネントとして独立しており、あとから個別にデザインを当て やすい構成にした Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
- image-split.ts に MIN_SPLIT_COUNT(2) / MAX_SPLIT_COUNT(6) と clampSplitCount を追加 - ImageSplitterScene に splitCount state を追加し、handleSplit の 分割数として使用。デフォルトは従来通り3 - ImageTrimScene に「分割数」の数値入力（MockNumberFormRow）を追加。 トリミング中に変更するとガイド線もリアルタイムに追従する - 見出し「画像3分割ツール」、ボタン「3分割する」などの表記を 「画像分割ツール」「分割する」に一般化 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
- 分割数の指定を MockNumberFormRow から MockRangeFormRow（スライダー）
に変更
- ~/common/format-timestamp.ts に formatTimestampForFilename を追加
（"YYYYMMDD-HHmmss" 形式、ファイル名に使えない記号を含まない）
- 分割完了時にタイムスタンプを1回だけ生成して保持し、ダウンロード
ファイル名を split-{n}-{timestamp}.png にすることで、分割し直す
たびにファイル名が変わるようにした
- TODO.md の該当2項目を完了に更新
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
分割結果を url だけでなく Blob も保持するようにし（SplitImage 型）、
共有時にその場で File[] を組み立てて navigator.share({ files }) に
渡せるようにした。navigator.canShare({ files }) で事前に判定し、
対応環境（Android Chrome 等）でのみ「まとめて共有」ボタンを表示、
非対応環境（デスクトップ Firefox 等）では従来通り個別ダウンロードの
みにフォールバックする。
ファイル名はダウンロード時と同じ split-{n}-{timestamp}.png を使用。
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
canvas.toBlob の出力を image/jpeg（品質0.92）に変更し、ダウンロード ファイル名の拡張子も .jpg に統一。フォーマット関連の定数 （OUTPUT_MIME_TYPE / OUTPUT_EXTENSION / OUTPUT_QUALITY）は ImageSplitResultScene からエクスポートし、ImageSplitterScene 側の canvas エンコード処理と共有する単一の情報源にした。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
/image-splitter に、ドラッグで切り抜き範囲を調整できる簡易トリミング機能付きの
画像3分割ツールを追加。X等での3分割投稿向けに、選択した範囲を縦3等分して
それぞれ個別にダウンロードできる。
Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01LkYojVqzb7QQsZJ3btgwRN