JavaScriptでAIイラストを多角形に切り抜く

以前投稿した「AIエロ漫画風「店員さんがコスプレしてくれる漫画喫茶MINU」」では、出来るだけエロ漫画を短時間で作るべく、 Libre OfficeのWriter（MSWordみたいなもの）を試してみました。
（Clip Studio EX買えよ、という声はアーアーキコエナーイ）

その中で、多角形の切り抜き（台形や五角形でキャラのワイプ表現をしたり）は出来ないかもなぁ、などと書きましたが、普通に出来ました。シェイプ機能で図形を描いた後に画像をドラック＆ドロップするだけ。ただ、拡大縮小や位置調整が直感的ではなく、左から何％ズラす、とか数値を指定する形なので、使い勝手が良いとはちょっと言いづらいです。

そこでふと思ったのですが、JavaScriptのcanvas機能でも多角形の切り抜きくらい出来そうじゃないか？ということ。

ちょっとした画像の切り抜きくらいWeb上で出来たら便利かもなぁ。既にそんなサービス普通にありそうだけど、自分で作れるなら作りたい。なぜならプログラミングは楽しいから！

JavaScriptでAIイラストをクリップするテスト

クリップしたい範囲を囲むように複数クリック（orタップ）してから、[Clip]ボタンをどうぞ。

ちょっと手抜きしていて、選択枠の赤い線が細いので、タップしても位置がわかりづらいかも。すまない。

逆パターン（黒塗りを消す）

黒い部分をテキトーにクリック（タップ）してCutをどうぞ。

陣取りゲームのクイックスを思い出したのはぼくだけじゃない、はず。

ベース絵

Prompt

(1girl loli:1.4),flat chest
,orange eyes,surprised face,wavy mouth,blush
,black long hair with black sheep horn
,dark skin
,red ruby around chest
,black leotard with pantyhose
,sholder armor
,dragon black wings,dragon black tail
,standing,holding poleaxe
,cowboy shot,posing
,white background
,from above
,open chest,nipples

このPromptで約500枚出力した中からそれっぽいのを選別しました。特にドラゴンウィングがなかなか背中に付かない。尻のあたりから生えてサキュバス娘になりがち。

おまけ

表情もポーズも良いなぁと思ったんだけど、肌が白すぎるのと紫レオタードになってしまったのでボツ

まとめ

最近見ないけど、昔はクイックス系のエロゲー流行ったよね…？