Javascript EXIF ​​Image Ориентация и просмотр изображений

Question

У меня есть ввод файла PHP и некоторый javascript, который отображает небольшой предварительный просмотр изображения, выбранного для загрузки. Мой вопрос в том, как я могу читать данные EXIF ​​и отображать (в режиме предварительного просмотра) изображение в правильной ориентации?

PHP входной файл

<div id="dropzone"> 
     <div>Add Photo</div> 
     <?php echo elgg_view('input/file', array(
       'name' => 'upload', 
       'accept' => 'image/jpeg, image/JPG, image/png', 
     )); ?> 
</div> 

Javascript

/* Find any element which has a 'data-onload' function and load that to simulate an onload. */ $('[data-onload]').each(function(){ eval($(this).data('onload')); });  

$(function() { 

    $('#dropzone').on('dragover', function() { 
    $(this).addClass('hover'); 
    }); 

    $('#dropzone').on('dragleave', function() { 
    $(this).removeClass('hover'); 
    }); 

    $('#dropzone input').on('change', function(e) { 
    var file = this.files[0]; 

    $('#dropzone').removeClass('hover'); 

    if (this.accept && $.inArray(file.type, this.accept.split(/, ?/)) == -1) { 
     return alert('File type not allowed.'); 
    } 

    $('#dropzone').addClass('dropped'); 
    $('#dropzone img').remove(); 

    if ((/^image\/(gif|png|jpeg|JPG)$/i).test(file.type)) { 
     var reader = new FileReader(file); 

     reader.readAsDataURL(file); 

     reader.onload = function(e) {  
     var data = e.target.result, 
      $img = $('<img />').attr('src', data).fadeIn(); 

     $('#dropzone div').html($img); 
     }; 
    } else { 
     var ext = file.name.split('.').pop(); 

     $('#dropzone div').html(ext); 
    } 
    }); 
}); 

Answer 1

Вы можете написать свой собственный алгоритм Exif синтаксического анализа, или использовать один из существующих Js LIBS, например exif-js

fileToImage function(file, callback){ 
    if(!file || !(/^image\/(gif|png|jpeg|jpg)$/i).test(file.type)){ 
    callback(null); 
    return; 
    }; 
    // for modern browsers and ie from 10 
    var createObjectURL = (window.URL || window.webkitURL || {}).createObjectURL || null; 
    var image = new Image(); 
    image.onload = function(){ 
    // exif only for jpeg 
    if(/^image\/(jpeg|jpg)$/i).test(file.type)){ 
     var convertExifOrienationToAngle = function (orientation) { 
      var exifDegrees = [ 
       0, // 0 - not used 
       0, // 1 - The 0th row is at the visual top of the image, and the 0th column is the visual left-hand side. 
       0, // 2 - The 0th row is at the visual top of the image, and the 0th column is the visual right-hand side. 
       180, // 3 - The 0th row is at the visual bottom of the image, and the 0th column is the visual right-hand side. 
       0, // 4 - The 0th row is at the visual bottom of the image, and the 0th column is the visual left-hand side. 
       0, // 5 - The 0th row is the visual left-hand side of the image, and the 0th column is the visual top. 
       90, // 6 - The 0th row is the visual right-hand side of the image, and the 0th column is the visual top. 
       0, // 7 - The 0th row is the visual right-hand side of the image, and the 0th column is the visual bottom. 
       270 // 8 - The 0th row is the visual left-hand side of the image, and the 0th column is the visual bottom. 
      ]; 
      if (orientation > 0 && orientation < 9 && exifDegrees[orientation] != 0) { 
        return exifDegrees[orientation]; 
       } else { 
        return 0; 
      } 
     }; 
     EXIF.getData(image, function() { 
      var angle = convertExifOrienationToAngle(EXIF.getTag(image, "Orientation") || 0); 
      var style = "-moz-transform: rotate(" + angle + "deg);-ms-transform: rotate(" + angle + "deg);-webkit-transform: rotate(" + angle + "deg);-o-transform: rotate(" + angle + "deg);transform: rotate(" + angle + "deg);"; 
      image.setAttribute("style", style); 
      callback(image); 
     }); 
    }else{ 
     callback(image); 
    }  
    }; 

    image.onerror = image.onabort = function(){ 
    callback(null); 
    }; 

    if(createObjectURL){ 
     image.src = createObjectURL(file); 
    }else{ 
    var reader = new FileReader(file); 

    reader.onload = function(e) {  
     image.src = e.target.result 
    }; 

    reader.onerror = reader.onerror = function(){ 
     callback(null); 
    }; 

    reader.readAsDataURL(file); 
    } } 

Пример использования:

fileToImage(file,function(image){ 
    if(image != null){ 
     document.body.appendChild(image) 
    }else{ 
     alert("can't load image"); 
    } 
}); 

также вы можете использовать метод с этого поста get orientation without lib