File APIとCanvasで画像をリサイズしてアップロード

sample01.html

<form>
  <input type="file" id="form_photo_pre" name="photo" value="">
  <input type="hidden" required="required" id="form_photo" name="photo" value="" />
  <canvas id="canvas"></canvas>
</form>
<script>
  $('#form_photo_pre').change(callbackFunc);
  $("#form_submit").click(function(){
    //formにbase64エンコード値セット
    var resCanvas1 = document.getElementById('canvas');
    var imgData = resCanvas1.toDataURL();
    $("#form_photo").attr('value',imgData);
  });
  
  function callbackFunc(evt){
    var file = evt.target.files[0];
    var img = new Image();
    var reader = new FileReader();
    var orientation;
    reader.onload = function(e) {
        var data = e.target.result;
        // JPEGの場合には、EXIFからOrientation（回転）情報を取得
        if (data.split(',')[0].match('jpeg')) {
            orientation = getOrientation(data);
        }
        // JPEG以外や、JPEGでもEXIFが無い場合などには、標準の値に設定
        orientation = orientation || 1;
    
        //canvas描画処理
        var mpImg = new MegaPixImage(file);
        var resCanvas1 = document.getElementById('canvas');
        mpImg.render(resCanvas1, { maxWidth: 300, maxHeight: 400, orientation: orientation });

        $("canvas").show();
    }
    reader.readAsDataURL(file);
  }
  
  function getOrientation(imgDataURL){
    var byteString = atob(imgDataURL.split(',')[1]);
    var orientaion = byteStringToOrientation(byteString);
    return orientaion;

    function byteStringToOrientation(img){
        var head = 0;
        var orientation;
        while (1){
            if (img.charCodeAt(head) == 255 & img.charCodeAt(head + 1) == 218) {break;}
            if (img.charCodeAt(head) == 255 & img.charCodeAt(head + 1) == 216) {
                head += 2;
            }
            else {
                var length = img.charCodeAt(head + 2) * 256 + img.charCodeAt(head + 3);
                var endPoint = head + length + 2;
                if (img.charCodeAt(head) == 255 & img.charCodeAt(head + 1) == 225) {
                    var segment = img.slice(head, endPoint);
                    var bigEndian = segment.charCodeAt(10) == 77;
                    if (bigEndian) {
                        var count = segment.charCodeAt(18) * 256 + segment.charCodeAt(19);
                    } else {
                        var count = segment.charCodeAt(18) + segment.charCodeAt(19) * 256;
                    }
                    for (i=0;i<count;i++){
                        var field = segment.slice(20 + 12 * i, 32 + 12 * i);
                        if ((bigEndian && field.charCodeAt(1) == 18) || (!bigEndian && field.charCodeAt(0) == 18)) {
                            orientation = bigEndian ? field.charCodeAt(9) : field.charCodeAt(8);
                        }
                    }
                    break;
                }
                head = endPoint;
            }
            if (head > img.length){break;}
        }
        return orientation;
    }
}
</script>