[JavaScript] 画像リサイズ＆回転 - Qiita別記事に書いた『画像変換：<img>要素 ⇔ Base64』 の手法を応用すると、画像リサイズや回転ができます。取り急ぎデモソースのみです。解説は、いずれ…。注意点として、冒頭の記事と同じくJavaScriptのクロスドメイン制限の影響を受けます。つまり、外部サーバーにある画像をリサイズ・回転して表示することはできません。 また、iOSでカメラ撮影された画像は勝手に回転してしまうので注意が必要です。詳細については「参考URL」を。 その１：<img>タグの画像をリサイズ・回転 ⇒ 画像リサイズのデモ：<img>タグ ⇒ 画像リサイズのデモ：<img>タグ【90度ずつ回転】 その２：Base64画像データをリサイズ・回転 ⇒ 画像リサイズのデモ：Base64 ※コールバック方式に書き直しました ⇒ 画像リサイズのデモ：Base64【90度ずつ回転】 参考URL ▼Canvasの画像をリサイズ
![[JavaScript] 画像リサイズ＆回転 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/56dd0eab0ba2cca5ca91e45dee8561be1315d2bd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzY3NTElMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODcxODc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YmExNTY3ZTlkNmFiZGJhZGRmZTNkMzExNzczMDY5ODU%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D99fc2c9611a89cd3b6973298de710c6e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFNyU5NCVCQiVFNSU4MyU4RiVFMyU4MyVBQSVFMyU4MiVCNSVFMyU4MiVBNCVFMyU4MiVCQSVFRiVCQyU4NiVFNSU5QiU5RSVFOCVCQiVBMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTg0MGRiNzVkMmMyMGY1YzZkY2JlMjMwYjdmZDJhZDY5%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5YXN1bW9kZXYmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MGJiMTA5NzhjNmVmMGUzMDhjZDk3M2Y2YWI4MGVjNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D3c2b4798ae5d1ca42433265d1e54ddbd)
