fix iOS upload image error

upload_img.html

  <script>

    var MAX_WIDTH = 300;
    var MAX_HEIGHT = 400;

    var dataurl_user = null;
    var dataurl_celebrity = null;
    function handleFiles(inputid, imageid_to_show, mode)
    {
      var filesToUpload = document.getElementById(inputid).files;
      var file = filesToUpload[0];

      // Create an image
      // var img = document.createElement("img");
      var img = new Image();

      // Create a file reader
      var reader = new FileReader();
      
      // Load files into file reader
      reader.readAsDataURL(file);

      // Set the image once loaded into file reader
      reader.onload = function(e)
      {
        img.src = e.target.result;

        img.onload = function () {

          var Orientation = null;
          EXIF.getData(img, function () {
            EXIF.getAllTags(img);
            Orientation = EXIF.getTag(img, 'Orientation');
          });

          var canvas = document.createElement("canvas");
          var ctx = canvas.getContext("2d");
          console.log(Orientation);
          if(Orientation && Orientation != 1) {
            switch(Orientation) {
              case 6:     // 旋转90度
                canvas.width = img.height;
                canvas.height = img.width;
                var final_size = resizeImage(canvas.width, canvas.height, MAX_WIDTH, MAX_HEIGHT);
                canvas.width = final_size[0];
                canvas.height = final_size[1];
                width = final_size[0];
                height = final_size[1];
                
                ctx.rotate(Math.PI / 2);
                // (0,-imgHeight) 从旋转原理图那里获得的起始点
                ctx.drawImage(img, 0, -width, height, width);
                break;
              case 3:     // 旋转180度
                canvas.width = img.width;
                canvas.height = img.height;
                var final_size = resizeImage(canvas.width, canvas.height, MAX_WIDTH, MAX_HEIGHT);
                canvas.width = final_size[0];
                canvas.height = final_size[1];
                ctx.rotate(Math.PI);
                ctx.drawImage(img, width, -height, width, height);
                break;
              case 8:     // 旋转-90度
                canvas.width = img.height;
                canvas.height = img.width;
                var final_size = resizeImage(canvas.width, canvas.height, MAX_WIDTH, MAX_HEIGHT);
                canvas.width = final_size[0];
                canvas.height = final_size[1];
                ctx.rotate(3 * Math.PI / 2);
                ctx.drawImage(img, -height, 0, width, height);
                break;
            }
          } else {
            canvas.width = img.width;
            canvas.height = img.height;
            var final_size = resizeImage(canvas.width, canvas.height, MAX_WIDTH, MAX_HEIGHT);
            canvas.width = final_size[0];
            canvas.height = final_size[1];
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          }

          if (mode == 'user') {
            dataurl_user = canvas.toDataURL("image/jpeg");
            document.getElementById(imageid_to_show).src = dataurl_user;
            document.getElementById("allUser").style.bottom=0;
            document.getElementById("userUploadbtn").innerHTML="重新上传";
          } else if (mode == 'celebrity') {
            dataurl_celebrity = canvas.toDataURL("image/jpeg");
            document.getElementById(imageid_to_show).src = dataurl_celebrity;
            document.getElementById("allCele").style.bottom=0;
            document.getElementById("celebrityUploadbtn").innerHTML="重新选择";
          }
        } // img.onload
      }
    }

    /* Given a max width and height, Keep the ratio */
    function resizeImage(width, height, MAX_WIDTH, MAX_HEIGHT)
    {
      if (width > height) {
        if (width > MAX_WIDTH) {
          height *= MAX_WIDTH / width;
          width = MAX_WIDTH;
        }
      } else {
        if (height > MAX_HEIGHT) {
          width *= MAX_HEIGHT / height;
          height = MAX_HEIGHT;
        }
      }
      return [width, height];
    }

    function submitForm(){
      var form = $("<form method='POST' enctype='multipart/form-data'>{% csrf_token %}</form>");
      form.attr({ "action": "/face2face/finish/" });
      var pra = new Object();
      pra.dataurl_user = dataurl_user;
      pra.dataurl_celebrity = dataurl_celebrity;
      for (arg in pra) {
        var input = $("<input type='hidden'>");
        input.attr({ "name": arg });
        input.val(pra[arg]);
        form.append(input);
      }
      $(document.body).append(form);
      form.submit();
    }
  </script>