動的に画像を切り抜きたい

Question

SNSなどのプロフ画像選択画面の様な動的なシステムを作りたい

下記イメージはgoogleのアカウントのプロフ写真設定の様子
画像中央にあるフレームをマウスで動的に操作し、移動する事ができて
また、ドラッグ操作でフレームのサイズも変更が可能
サイドボタンでは画像を90度ずつ左右に回転できる

作りたいもの

上記イメージの様に、画像を読み込み

• マウス操作でフレームカーソルを移動させられる
• ドラッグ操作でフレームサイズを変更できる
• フレーム内側部分の画像を切り出し、保存

この3点を抑えたシステムを作りたいと考えています。

作ったものはtkinterのGUIに埋め込み、GUI上で操作でき
また保存はGUI上にボタンを配置してボタンクリックで保存処理を行いたいと考えているのですが
作り方がイメージできず
アルゴリズムや、参考コードなどわかる方がいらっしゃればアドバイス・ご教示お願いします。

Comments

[nanami12]

設計をするのもプログラミングの一部です。
設計もできないのなら、コーディングもむりでしょう

[nto]

そうですね、まだ独学でさわり２ヶ月程度の初学だったもので設計が出来ずすみませんでした

Answer 1

内容が多岐に渡るので、足掛かりになりそうなところだけ

画像処理に関して

tkinterのPhotoImageクラスでは一部のファイルフォーマットにしか対応していないので、
一般的な jpeg ファイルを読み込み、tkinterへ画像を描画するためには
3rdパーティ製の画像処理ライブラリPIL(Pillow) の ImageTk を用います。

Tkinter で作成する必要がある部分

• マウス操作でフレームカーソルを移動させられる
• ドラッグ操作でフレームサイズを変更できる

アプリ内でウィジェットの Drag and Drop で移動は、tkinter.dnd が参考になります。
シェル(コマンドプロンプト等)で python -m tkinter.dnd と実行すると動作サンプルが見れます。
windowが複数現れて ICON というボタンをマウスで移動できます。

リサイズに関しても同様、応用で出来ますが、
（ドラッグ操作によりオブジェクトを「移動」させている部分を「サイズ変更」にする等）
具体的な処理はフレームの実装方法次第になります。

画像を切り取り保存 (PIL)

PILを用いて画像を加工するのが簡単で、サンプルコードも多く見つかるかと思います。
画像の範囲を切り取ることを「トリミング」や「クロッピング」といい、
PILでは Image.crop メソッドに範囲の座標を指定することで実現できます。

---

コードは長くなりそうなので、
実装手順の要約だけ書き残しておきます。

- PIL(Pillow)で画像処理
  - 画像を読み込み tkinter の Canvas 上に表示
    Image.open と ImageTk.PhotoImage を用います。
  - 切り取り -> Image.crop() を使う
- tkinter で画像の範囲指定をするフレーム(枠)を実装
  - Step1: キャンバス上に枠を描画する create_reactangle
  - Step2: アイコンを配置してマウスで移動可能にする
    - ドラッグアンドドロップのイベント処理方法について 
      - `<ButtonPress-1>`イベント内で
      	- `<BUttonRelease-1>` と `<Motion>` を登録
      - `<ButtonRelease-1>` でイベントハンドラを解除
      - `<Motion>`内にマウスカーソル移動中の処理
  - Step3: アイコンを枠の4隅に配置
  - Step4: アイコンを移動時に他の2点の座標も移動させる(長方形の枠を維持)
  - Step5: アイコンの移動に応じて枠の描画を更新 (Canvas.coords)
  - Step6: キャンバスをドラッグ時に、枠を移動する
  - Step7: 枠の座標から、画像の切り取る範囲を決定

動作イメージ

---

[2020/03/19 22:47] 追記: 参考ソース

「tkinter crop」 や 「トリミング」で検索して
良い感じに参考になりそうなコード見つかったので紹介します。
https://github.com/Lexing/pyImageCropper/blob/master/crop.py

• ImageTkを用いてCanvasへ画像を描画
• Image.cropを用いた切り取り
• マウスでのドラッグ&ドロップの一連のイベント処理
• 選択領域のリサイズ

あたりの参考になると思います。
UIの操作は違いますが、目的のものに近いのではないでしょうか。
マウスで範囲選択した後に、キーボードの十字キーで微調整できるようです。

操作は、コマンド引数でJPEG画像が置かれたディレクトリのパスを渡し起動、
スペースで切り取り保存し次のファイルへ、q で終了。

８年程前のコードなので、Python2系の環境が必要になりますが
1箇所だけ修正して動きました。win10 ActivePython2.7 + PIL で動作確認。
import ImageTk -> from PIL import ImageTk

画像の種類によっては get_exif_image() でエラーが出るかもしれないので、
その場合は追加でもう一箇所修正

# get_image_exif()メソッド内に(適切なインデントで)追加
if not hasattr(image, "_getexif"):
    return

Comments

[nto]

先日に引き続き、非常にわかりやすい手引きありがとうございます！
かなり実装の為のイメージが湧き上がりました。
仕事の合間に制作をしておりましたので、少し時間を掛け試作をしていこうと思います。
改めて、また何か不明点が生じた際にはご質問させていただきます。