当我上传图像时,我有这种奇怪的行为,如果这个图像尺寸高于我的图像旋转90度.
@H_301_1@检查这个使用ngImgCrop的fiddle,这是我正在上传的image
@H_301_1@ngDmgCrop的代码非常标准:
@H_301_1@我该如何解决这个问题呢?
- 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标记,然后相应地旋转.
@H_301_1@我刚刚用这个库解决了同样的问题:Javascript Load Image
@H_301_1@在你的app.js中
@H_301_1@演示:Plunker @H_301_1@干杯.
- 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 );
- });
- };