LoginSignup
75
86

More than 5 years have passed since last update.

[JavaScript] 画像リサイズ&回転

Last updated at Posted at 2015-07-19

別記事に書いた『画像変換:<img>要素 ⇔ Base64』 の手法を応用すると、画像リサイズや回転ができます。取り急ぎデモソースのみです。解説は、いずれ…。注意点として、冒頭の記事と同じくJavaScriptのクロスドメイン制限の影響を受けます。つまり、外部サーバーにある画像をリサイズ・回転して表示することはできません。

また、iOSでカメラ撮影された画像は勝手に回転してしまうので注意が必要です。詳細については「参考URL」を。

その1:<img>タグの画像をリサイズ・回転

画像リサイズのデモ:<img>タグ
画像リサイズのデモ:<img>タグ【90度ずつ回転】

その2:Base64画像データをリサイズ・回転

画像リサイズのデモ:Base64 ※コールバック方式に書き直しました
画像リサイズのデモ:Base64【90度ずつ回転】

参考URL

▼Canvasの画像をリサイズする簡単な方法【HTML5・javascript】
http://mementoo.info/archives/1634
▼クライアント側でcanvasを使って画像をリサイズする
http://qiita.com/geek_duck/items/2db28daa9e27df9b861d
▼HTML canvas drawImage() Method
http://www.w3schools.com/tags/canvas_drawimage.asp
▼JavaScriptで縮小画像の作成
http://am-yu.net/2014/03/16/
▼Canvas の「汚染」?
https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image
▼[JavaScript] 画像変換 img要素⇔Base64
http://qiita.com/yasumodev/items/e1708f01ff87692185cd

iOS注意点

iOS系(iPhone、iPadなど)の端末でカメラ撮影されたJPEG画像を canvas に描画すると勝手に回転されてしまいます。「画像のEXIF情報を読み取って、そのつど回転してね」というイジワルな(?)仕様のようです…。これについては以下のサイトが参考になります。

▼iPhoneの写真が勝手に回転している事に悩まされた話
http://jp.kumi-log.com/entry/2014/03/16/160752
JPEGからJavascriptでEXIFのOrientation情報のみを取得する
http://www.egashira.jp/2013/03/obtain-orientation-from-jpeg-exif
▼exif-js と ios-imagefile-megapixel でスマホからの画像アップロードのプレビュー表示に対応する
http://wada811.blogspot.com/2014/11/image-upload--preview.html
▼iPhoneやiPadで撮った写真(縦)をCANVASへdrawimageすると、勝手に回転する現象
http://konnma.blogspot.jp/2014/12/iphoneipadcanvasdrawimage.html


(・o・ゞ いじょー。

75
86
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
75
86