JavaScript

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

More than 1 year has passed since last update.

別記事に書いた『画像変換:<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・ゞ いじょー。