强制图像方向angularjs

前端之家收集整理的这篇文章主要介绍了强制图像方向angularjs前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我上传图像时,我有这种奇怪的行为,如果这个图像尺寸高于我的图像旋转90度. @H_301_1@检查这个使用ngImgCropfiddle,这是我正在上传image

@H_301_1@ngDmgCrop的代码非常标准:

  1. angular.module('app',['ngImgCrop'])
  2. .controller('Ctrl',function($scope) {
  3. $scope.myImage='';
  4. $scope.myCroppedImage='';
  5.  
  6. var handleFileSelect=function(evt) {
  7. var file=evt.currentTarget.files[0];
  8. var reader = new FileReader();
  9. reader.onload = function (evt) {
  10. $scope.$apply(function($scope){
  11. $scope.myImage=evt.target.result;
  12. });
  13. };
  14. reader.readAsDataURL(file);
  15. };
  16. angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  17. });
@H_301_1@我该如何解决这个问题呢?

您必须解析图像标题中的exif数据,检查Orientation标记,然后相应地旋转. @H_301_1@我刚刚用这个库解决了同样的问题:Javascript Load Image

@H_301_1@在你的app.js中

  1. var handleFileSelect = function(evt) {
  2.  
  3. var target = evt.dataTransfer || evt.target;
  4. var file = target && target.files && target.files[0];
  5. var options = {canvas:true};
  6.  
  7. var displayImg = function(img) {
  8. $scope.$apply(function($scope){
  9. $scope.myImage=img.toDataURL();
  10. });
  11. }
  12.  
  13. loadImage.parseMetaData(file,function (data) {
  14. if (data.exif) {
  15. options.orientation = data.exif.get('Orientation');
  16. }
  17. loadImage(file,displayImg,options );
  18. });
  19.  
  20. };
@H_301_1@演示:Plunker

@H_301_1@干杯.

猜你在找的Angularjs相关文章