21
- 9月
2017
No Comments
画像を変形させて保存できるWebアプリを作った
Advertisements
What is this?
Documentation in English is at the end of this docment.
こんなWebアプリケーションを開発したので公開することにしました。
こんなことができます。
- 射影変換によって、画像を任意の台形に変形を行う。
- 画像の明るさとコントラストも変えることができる。
- さらに、変形した画像を保存できる。
- 全ての処理はブラウザ上で完結する。
- そのため、
どこかのサーバなどへ画像などが送信されることはない。
- そのため、
レスポンシブWebデザインに、Bootstrapを使っています。
gridシステム、便利ですよね！
今どきのライブラリのトレンドに変化があるかと思ったら、いまだにbootstrapが君臨しているようです。
なお、今回は画面デザインをデフォルトから変更し、UMIを使いました。
さらにUMIをforkして、darkなデザインでもボタンなどが映えるようなデザインの変更を行っています。
・・・・・
最初、開発に着手した時はあまり深く考えずに、
「お！日本語が綺麗になるんだ！」
って思って飛びついたものの、application内で日本語使ってなかった。。。。
使い方
こんな感じです。
- D$&Dないしファイルオープン画面から、対象の画像ファイルを開く。
- 画像の四隅を移動させ、画像を変形させる。
- 四隅のAnchorを、移動させてください。
- keyboard操作時、Anchorなどがうまく動かなくなったら、
fを押下してください。
- 明るさやコントラストを調整する。
- オレンジの点線に沿って、画像をcropし保存する。
- jpgとpngが選択可能
- マウスだけじゃなく、
キーボードでも操作可能。- ショートカット一覧は下記を参照
そんな、深く悩むようなことはないでしょう。
苦労した点
HTML5のcanvasで描画を行っています。
これが面倒だった。。。。
というのも、世の中にはいろいろライブラリがあって、それらを使えば簡単に書ける処理もあったのです。
が、射影変換を行う処理を入れているため、ライブラリによって相性が悪く、
全体のレンダリング処理を重くしたりしたので、ネイティブのcanvasを書かざるを得なかった・・・・
ってことで
いろいろ使ってもらえると幸いです。
What is this
- You can obtain a tranformed picture by homography.
- In addition, you are able to change the Brightness and Contrast of the picture, too.
- Finally , you can save the transformed image on your local machine.
- All of operation in this application is
executed in your browser.No data is sent to anywhere.
How to use
- Opening the Image file to transform by D&D or diaolg.
- Straining the Image form by moving each 4 corner.
- Ajusting the Blightness or contrast of the Image.
- Croppomg the Image surrounded by Orage broken line.
- Useful for operation not only Mouse but also Keyboad shortcut.
Key control
| key | discription | 説明 |
|---|---|---|
| q | move to next corner | Actinveなアンカーを、次のアンカー（角）へ移動 |
| f | focus at upper left corner | 左上隅の角をActivate（移動対象とする） |
| cursor | transform rectangle form | 角を移動させて画像を変形 |
| 7, 9 | change brightness of Image | 画像の明るさを調整 |
| 4, 6 | change contrast of Image | 画像のコントラストを調整 |
| 1, 3 | change quality of Image at save | 画像保存時の圧縮率を調整 |
| 2,5,8 | return each value to default | 明るさ、コントラスト、圧縮率をデフォルト値に戻す |
| Return | Save an Image | 画像をオレンジの点線範囲で切り取って保存 |
To Do / known bugs / Future works
It’s not guaranteed the quality or performance, and follow tasks.
- This appliaction is checked on Google Chrome and Mozilla Firefox browser only.
- This app works in IE, however, it’s not known exactly why the process is too heavy…
- We cannot reset our operations. We have to reload (such as press F5) contents.
- If the image file, which ratio of the image is not 4:3, is selected, the image is expanded and cut without our intended.
- The slide bar does not work when you operate image correction on keyboard.
- The function, rotation of the image, will be release in future.
License
This program is applied MIT License.
Advertisements