强制图像方向angularjs

发布时间：2020-12-17 07:28:57 所属栏目：安全来源：网络整理

导读：当我上传图像时,我有这种奇怪的行为,如果这个图像尺寸高于我的图像旋转90度. 检查这个使用ngImgCrop的fiddle,这是我正在上传的image ngDmgCrop的代码非常标准： angular.module('app',['ngImgCrop']) .controller('Ctrl',function($scope) { $scope.myImage=

当我上传图像时,我有这种奇怪的行为,如果这个图像尺寸高于我的图像旋转90度.

检查这个使用ngImgCrop的fiddle,这是我正在上传的image

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 Load Image

在你的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 );
      });

  };

演示：Plunker

干杯.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!