如何在使用角度文件上传之前修复EXIF方向

How to fix EXIF orientation on before upload with angular-file-upload

本文关键字：方向 EXIF 文件      更新时间：2023-09-26

我正在使用角度文件上传指令上传文件，我对使用苹果设备拍摄的图像或照片有问题，我知道苹果在图像上包含exif方向数据以纠正苹果设备上的视图，但是当这些图像上传到网络应用程序时，浏览器的方向是错误的。

我在我的应用程序的几个视图中使用此指令，因为时间 reazon 更改为另一个像 ng-file-upload 这样的指令不是最佳选择。

还有其他一些指令可以解决此问题，例如ng文件上传，但我想知道如何使用角度文件上传的onBeforeUploadItem事件解决此问题。

现在我解决了它。

这是我的工作。

以下是 html 中的代码：

<input id="upload_button" type="file" nv-file-select="" uploader="uploader" multiple/>

和

<img ng-show="uploader.isHTML5" ng-src="{{pic}}" height="100%" />

然后在控制器中：

var handleFileSelect = function(evt) { $scope.pic = ""; 

    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.pic = img.toDataURL();
            $scope.rotatedFile = dataURItoBlob($scope.pic);
        });
    };
    loadImage.parseMetaData(file, function(data) {
        if (data.exif) {
            options.orientation = data.exif.get('Orientation');
        }
        loadImage(file, displayImg, options);
    });
};
angular.element(document.querySelector('#upload_button')).on('change', handleFileSelect);
var dataURItoBlob = function(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: mimeString});
    };`

然后，在上传之前：

uploader.onBeforeUploadItem = function(item) {
        $log.debug('onBeforeUploadItem', item);
        item._file = $scope.rotatedFile;
    };

你需要 loader-image.min.js、ng-img-crop.js 和 app 中的[ngImgCrop].js

仅此而已。

我希望它对你有所帮助。

相关文章：