强制图像方向angularjs [英] Force image orientation angularjs

问题描述

当我上传图片时，如果此图片尺寸的高度大于我的图片旋转90度，我会有这种奇怪的行为.

选中使用小提琴 > ngImgCrop ，这是我正在上传的图像

ngDmgCrop的代码非常标准:

angular.module('app', ['ngImgCrop'])
  .controller('Ctrl', function($scope) {
    $scope.myImage='';
    $scope.myCroppedImage='';

    var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
        $scope.$apply(function($scope){
          $scope.myImage=evt.target.result;
        });
      };
      reader.readAsDataURL(file);
    };
    angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  });

如何解决此问题?

解决方案

您必须解析图片标题中的exif数据，检查Orientation标签，然后进行相应的旋转.

我刚刚使用此库解决了相同的问题: Javascript加载映像

在您的 app.js

中

  var handleFileSelect = function(evt) {

      var target  = evt.dataTransfer || evt.target;
      var file    = target && target.files && target.files[0];
      var options = {canvas:true};

      var displayImg = function(img) {
        $scope.$apply(function($scope){
          $scope.myImage=img.toDataURL();
        });
      }

      loadImage.parseMetaData(file, function (data) {
        if (data.exif) {
          options.orientation = data.exif.get('Orientation');
        }
        loadImage(file, displayImg, options );
      });

  };

演示:柱塞

干杯.

I have this odd behavior when I upload an image and if this image size has more height than with I get the image rotated 90 degrees.

check this fiddle that's using ngImgCrop and this is the image that I'm uploading

the code of the ngDmgCrop it's pretty standard:

angular.module('app', ['ngImgCrop'])
  .controller('Ctrl', function($scope) {
    $scope.myImage='';
    $scope.myCroppedImage='';

    var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
        $scope.$apply(function($scope){
          $scope.myImage=evt.target.result;
        });
      };
      reader.readAsDataURL(file);
    };
    angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  });

how can I fix this behavior?

解决方案

You'll have to parse the exif data in the image header, examine the Orientation tag, and rotate accordingly.

I just solved the same problem with this library: Javascript Load Image

In your app.js

  var handleFileSelect = function(evt) {

      var target  = evt.dataTransfer || evt.target;
      var file    = target && target.files && target.files[0];
      var options = {canvas:true};

      var displayImg = function(img) {
        $scope.$apply(function($scope){
          $scope.myImage=img.toDataURL();
        });
      }

      loadImage.parseMetaData(file, function (data) {
        if (data.exif) {
          options.orientation = data.exif.get('Orientation');
        }
        loadImage(file, displayImg, options );
      });

  };

Demo : Plunker

Cheers.

这篇关于强制图像方向angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！