なでしこを明後日の方向に

日本語プログラム言語なでしこを応援しています

なでしこに画像のトリミングをやってもらう

ブラウザゲームスクリーンショットを撮りました。
ブラウザゲームはデータを参照するたびにロードを挟むので時間がかかります。
そこでスクショを撮ってローカルでぱぱっと見比べようとしたわけ。

f:id:tkizzz:20201123212612j:plain
2020年11月現在たいへん勢いのあるゲーム

ここで必要な情報はゲーム部分だけなので、上下左右はいらない。
なでしこでゲーム部分だけ切り抜いて画像保存しようという試みです。 f:id:tkizzz:20201123212503j:plain

プログラムの雰囲気

トリミングのサイズを調べる → 画像部分コピー → 画像保存でよさそう。
サイズを調べる部分以外は簡単です。

作業イメージとはイメージ
保存用イメージとはイメージ
fileとは変数
「*.jpg」ファイル列挙 //スクショのjpgがたくさんある
反復
 file=対象
 トリミングサイズ取得(file)//ここx,y,w,h調べる
 
 保存用イメージW=w
 保存用イメージH=h
 保存用イメージ画面クリア
 作業イメージ画像file
 作業イメージx,y,w,h保存用イメージ0,0画像部分コピー
 //作業イメージをfileへ画像保存 

●トリミングサイズ取得(file)
 //ここでx,y,w,hを調べて返す

x,y,w,hを固定して決め打ちすれば簡単にできるのですが、今回はブラウザゲーのトリミングです。
その日のブラウザの幅によってx,y地点が変わってしまいます
なので、左上の地点x,yをプログラムで探します!

f:id:tkizzz:20201123213119j:plain

色を取得する

「点取得」と「画像色取得」命令がありますがたぶん同じです。
点取得はx,yの色コードを取得します。
RGB(r,g,b)で返ってくるやつと同じで1677万色($FFFFFF)だか。

画像の左端あたりから点取得して、ゲームの「額縁」を探せばいいのです……?

y=200//てきとう
x10から200まで繰り返す
  色X[回数]=作業イメージx,y点取得 
  もし色X[回数]???ならば抜ける

色を決め打ちできれば楽なのですが、jpg画像は「それっぽい色」に劣化しているので「全く同じ色」になりません。
近い色を簡単に扱う方法は何かあったかな……?

画像グレイスケールを使う

f:id:tkizzz:20201123213226j:plain
画像グレイスケールしたところ
画像グレイスケールという命令があります。
これを使うと画像が白黒になります。
白黒になった画像から点取得すると、RGB(r,g,b)のrとgとbが同じ値、たとえばRGB(100,100,100)のような色になります。

RGB(r,g,b)のrgbが同じ値ということは、256色です。
1677万色が256色に減りました。
RGB(r,g,b)は$rrggbbなので、256で割った余りがbの値になります。

繰り返し点取得して256で割った余りを見てみます。

f:id:tkizzz:20201123213411j:plain
xを10から200まで点取得

0に近いほど黒で、255に近いほど白になります。
このゲームの場合、額縁は黒っぽくなっていって、白い部分があるのが特徴です。
前の点との差分で、急に20くらい白くなったら額縁だと思います。

f:id:tkizzz:20201123213533j:plain
xは29

さらにその点から上方向を見ます。
額縁にあたると黒くなるののでそこで「抜ける」

f:id:tkizzz:20201123213636j:plain

作業イメージとはイメージ
作業イメージ位置「0,0」
作業イメージ画像「20201123_00.jpg」
作業イメージ画像グレイスケール
y=200
x10から200まで繰り返す
  色=作業イメージx,y点取得
  色x[回数]=%256
  作業イメージx,y赤色点描画
  もし回数1ならば続ける
  もし色x[回数]>色x[回数-1]+20ならば//20以上白くなった
    母艦タイトル「x={x}」
    抜ける

yy-1から10まで繰り返す
  色=作業イメージx,y点取得
  色y[回数]=%256
  作業イメージx,y赤色点描画
  もし回数1ならば続ける
  もし色y[回数]<色y[回数-1]-20ならば//20以上黒くなった
    母艦タイトル「x={x},y={y}」
    抜ける

w,hも同様に額縁をつたって端まで行けばOKです。
額縁の白いところが判明したので、あとはてきとうにx,yから定数を引いて左上ということにします。

グレイスケールした画像は捨てて、もう一度作業イメージに画像をロード。

f:id:tkizzz:20201123212612j:plain
トリミング前

「作業イメージのx,y,w,hを保存用イメージの0,0へ画像部分コピー」して……
出来上がり!

f:id:tkizzz:20201123213829j:plain
トリミング後