Vue+exifで画像回転を実現

10854 ワード

html 5+canvasがモバイル端末の携帯電話の写真をアップロードすると、iosの携帯電話の縦撮り写真が反時計回りに90度回転することがわかり、横撮り写真には問題がない.Android携帯にはこの問題はありません.
そこでこの問題を解決する構想は,写真撮影の方向角を取得し,横撮りではないios写真を角度回転補正することである.注:開発時に三星携帯電話の提出時に右に90度回転することを発見したので、アンドロイドシステムの中で三星携帯電話だけを特別に処理します.ここでは主にOrientation属性を使います.以下に説明します.
回転角度かいてんかくど
パラメータ

1
時計回り90°
6
反時計回り90°
8
180°
3
一、htmlファイル
<a href="javascript:document.getElementById('fileobj').click()">
  <button type="button" class="upload-image-btn" >
  <span class="upload-btn-text" v-if="!show_upload_next_button" v-text="Camera / Photo">span>
  <span class="upload-btn-text" v-text="Please add the images" v-else>span>
  button>
a>
<input type="file" id="fileobj" accept="image/*" style="display:none" @change="fileobj_change">

二、jsファイル
fileobj_change: function(e) {
  var vue_this = this;
  var file = e.target.files[0];
  vue_this.show_loading = true;
  var orientation = 0;
  EXIF.getData(file, function() {
    EXIF.getAllTags(this);
    orientation = EXIF.getTag(this, 'Orientation');
  });
  // console.log(orientation)
  var reader = new FileReader();
  reader.onload = function(readerEvent) {
  var face_image = new Image();
    face_image.onload = function(imageEvent) {
      var canvas = document.getElementById('sketchpad');
      drawPhotoImage(this, canvas, face_image, orientation);
      vue_this.image_url = canvas.toDataURL('image/jpeg');
      vue_this.show_upload_next_button = true;
      vue_this.show_loading = false;
    };
    face_image.src = readerEvent.target.result;
  };
  reader.readAsDataURL(file);
}
function drawPhotoImage(image, canvas, face_image, orientation) {
  var max_size = 544,
    width = face_image.width,
    height = face_image.height;
    if (width > height) {
      if (width > max_size) {
         height *= max_size / width;
         width = max_size;
      }
    } else {
      if (height > max_size) {
        width *= max_size / height;
        height = max_size;
      }
  }
  canvas.width = width;
  canvas.height = height;
  if (navigator.userAgent.match(/iphone/i)) {
    if (orientation != "" && orientation != 1) {
      switch (orientation) {
        case 6:
          rotateImg(image, 'left', canvas, width, height);
            break;
        case 8:
          rotateImg(image, 'right', canvas, width, height);
            break;
        case 3:
          /*
          //      180        90                       => right2
          rotateImg(image, 'right', canvas, width, height);
          rotateImg(image, 'right', canvas, width, height);*/
          rotateImg(image, 'right2', canvas, width, height);
          break;
        default:
          canvas.getContext('2d').drawImage(face_image, 0, 0, width, height);
          break;
      }
    } else {
      canvas.getContext('2d').drawImage(face_image, 0, 0, width, height);
    }
  }else if(get_ua_info()){
    rotateImg(image, 'left', canvas, width, height);
  }else {
    canvas.getContext('2d').drawImage(face_image, 0, 0, width, height);
  }
}

function rotateImg(img, direction, canvas, width, height) {
  var min_step = 0;
  var max_step = 3;
  if (img == null) {
    return;
  }
  var step = 2;
  if (step == null) {
    step = min_step;
  }
  if (direction == 'right') {
    step++;
    step > max_step && (step = min_step);
  }else if(direction == 'right2'){
    step = 2;
  }else {
    step--;
    step < min_step && (step = max_step);
  }
  var degree = step * 90 * Math.PI / 180;
  var ctx = canvas.getContext('2d');
  switch (step) {
    case 0:
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      break;
    case 1:
      canvas.width = height;
      canvas.height = width;
      ctx.rotate(degree);
      ctx.drawImage(img, 0, -height, width, height);
      break;
    case 2:
      canvas.width = width;
      canvas.height = height;
      ctx.rotate(degree);
      ctx.drawImage(img, -width, -height, width, height);
      break;
    case 3:
      canvas.width = height;
      canvas.height = width;
      ctx.rotate(degree);
      ctx.drawImage(img, -width, 0, width, height);
      break;
    }
}
//         
// :                https://github.com/fex-team/ua-device
function get_ua_info(){
  if(navigator.userAgent.indexOf(" SM-")!=-1)
    return true;
  else 
    return false;
}

github:
https://github.com/exif-js/exif-js