canvasへの画像の描画について

Question

現在、ユーザーがアップロードした画像をcanvasに描画する事を目指して作成しています。
描画自体は出来たのですが、スマホからカメラで撮影した場合や、スマホで撮影した画像をアップロードすると
意図した向きで描画されません。

動作としては
inputタグにより内容が変化したら発動。
データをあらかじめ用意してある

<canvas id="c1" width="400" height="400"></canvas>

に向きを考慮して描画したい。です。

画像のアップロード部html

<input id="uploadFile" name="image" type="file" />

 $("#uploadFile").change(function() {
    var canvas = $("#c1");
    var ctx = canvas[0].getContext("2d");

  
    var file = this.files[0];

    
    if (!file.type.match(/^image\/(png|jpeg|gif)$/)) return;

    var image = new Image();
    var reader = new FileReader();

   
    reader.onload = function(evt) {

        image.onload = function() {
        ctx.drawImage(image, 0, 0, 400,400);
        }

        image.src = evt.target.result;

        ORGURL = evt.target.result;
    }


    reader.readAsDataURL(file);
});

Exif情報が問題な事は判明したのですが、
上記ソースをもとにExif情報を判断したり、その結果により回転させて描画する方法を模索しています。
どうぞよろしくお願い致します。

Answer 1

ライブラリなどがあるようです。

【iPhoneからアップロードしたJPEG写真が横向きになる問題(EXIF, Orientation) - Qiita】
http://qiita.com/RichardImaokaJP/items/385beb77eb39243e50a6

【iPhoneで撮った写真をアップロードする際の画像補正 | takayukii.blog】
http://takayukii.me/post/20160522824

【スマホでカメラ撮影した画像をcanvasに描画すると、横表示されてしまう問題 - Qiita】
http://qiita.com/mo49/items/a3d61d97f1883ead333b