type="file" にアップロードした画像をトリムしたい。

Question

type="file" でアップした画像を一定サイズにトリムしてからsubmitしたいですがいい方法ありませんか？
よろしくお願いいたします。

Answer 1

使えるかどうかはわかりませんが、js画像切抜きライブラリいくつか。

---

【Photo Editor - Webベースの写真編集ソフトウェア MOONGIFT】
http://www.moongift.jp/2016/01/photo-editor-webベースの写真編集ソフトウェア/

【Cropper - スマートフォンにも対応した画像切り抜きライブラリ MOONGIFT】
http://www.moongift.jp/2015/11/cropper-スマートフォンにも対応した画像切り抜きライ/

【画像の縦横比を合わせてアップロードするまで - ボクココ】
http://www.bokukoko.info/entry/2016/03/26/画像の縦横比を合わせてアップロードするまで

【わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）】
http://plus.appgiga.jp/masatolan/2015/07/29/56567/

【リッチなHTML5ベースの画像編集エディタがサイト内に実装できる「Pixie」:phpspot開発日誌】
http://phpspot.org/blog/archives/2015/03/html5pixie.html

【画像アップロード時にクライアント側で編集が可能になる「picEdit」:phpspot開発日誌】
http://phpspot.org/blog/archives/2014/11/picedit.html

【ブラウザ上でUPした画像を簡単に切り抜けるjQueryプラグイン「Picture Cut」:phpspot開発日誌】
http://phpspot.org/blog/archives/2014/10/upjquerypicture.html

【画像の切り抜きがブラウザ上で簡単に行える「cropbox」:phpspot開発日誌】
http://phpspot.org/blog/archives/2014/10/cropbox.html

Answer 2

単純なクロップであれば、<canvas>を使って自分で実装するのも手かと
サンプル

Answer 3

ペイント系のアプリでやってから送るしかないでしょう
もしくは送った先でトリムしてもらってください

Comments

[rainbowsix]

JSなど使ってなんとかならないですかね。

[yambejp]

ちなみに質問者さんのいう「トリム」とはなんでしょうか？
リサイズするのか一部分を切り出すのか想定がわかりません。
いずれにしてもjsでやることではないと思いますが
どっかにライブラリが転がってないとも言えないです

[rainbowsix]

なるほど、あきらめるしかないですね。ご回答ありがとうございます。

[yambejp]

いや、本質的にjsでやることではないというだけで
できないわけでもないみたいですよ

「js 画像 リサイズ ライブラリ」あたりでググると
いくつかヒットしますね
良さそうなものを試してみてはどうでしょう？