86
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
86
Help us understand the problem. What are the problem?