【解决后】移动端上传照片 预览+draw on Canvas demo（解决iOS等设备照片旋转90度的bug）

HTML

<input accept="image/*" id="file" type="file" />
<br/>
<br/> 预览：
<br/>
<img id="photo" src="" />
<br/>
<br/>
<button id="drawBtn">draw on Canvas</button>
<br/>
<canvas id="canvas" width="350" height="250"></canvas>

CSS

#photo {
   width: 350px;
   height: 250px;
 }

JavaScript

//上传照片
  $("#file").change(function() {
    drawTempPhoto();
  });
  //在Canvas上draw
  $("#drawBtn").click(function() {
    drawPhoto($("#photo")[0], 0, 0, 350, 250);
  });

  //绘制照片
  function drawTempPhoto() {

    //检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if (!/image\/\w+/.test(file.type)) {
      alert("看清楚哦，这个需要图片！");
      return false;
    }
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload = function(e) {

      //预览效果
      var img = $("#photo")[0];
      //加载图片，此处的this.result为base64格式
      img.src = this.result;
      img.onload = function() {

        //获取照片的拍摄方向
        var orient = getPhotoOrientation(img);
        alert("orient1:" + orient);
        //判断是否是三星手机
        //                if (isSamsung) {
        //                     //做旋转的适配……
        //                }

      };

    }

  }

  //获取照片的元信息（拍摄方向）
  function getPhotoOrientation(img) {
    var orient;
    EXIF.getData(img, function() {
      orient = EXIF.getTag(this, 'Orientation');
      alert(EXIF.getTag(this, 'Make'))
    });
    return orient;
  }

  //绘制照片
  function drawPhoto(photo, x, y, w, h) {

    //获取照片的拍摄方向
    var orient = getPhotoOrientation(photo);
    alert("orient2:" + orient);

    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");

      //draw on Canvas
      var img = new Image();
      img.onload = function() {

        var canvas_w = Number(ctx.canvas.width);
        var canvas_h = Number(ctx.canvas.height);

        //判断图片拍摄方向是否旋转了90度
        if (orient == 6) {
          ctx.save(); //保存状态
          ctx.translate(canvas_w / 2, canvas_h / 2); //设置画布上的(0,0)位置，也就是旋转的中心点
          ctx.rotate(90 * Math.PI / 180); //把画布旋转90度
          // 执行Canvas的drawImage语句
          ctx.drawImage(img, Number(y) - canvas_h / 2, Number(x) - canvas_w / 2, h, w); //把图片绘制在画布translate之前的中心点，
          ctx.restore(); //恢复状态
       ...