从手机上传到Angular的图片是侧面或颠倒的

Question

我能够将我的桌面上的图像上传到基于Angular的Web应用程序,而不会出现问题,但是如果我从手机(如iPhone)上传,请使用"拍摄照片或视频"或"照片库"功能,当在横向拍摄时,它会导致图像在纵向拍摄时或横向拍摄.这是我目前的上传功能.任何线索/让其他人都有同样的问题从iPhone /移动电话上传到移动Web应用程序到SharePoint库？

这是我的上传功能:

  // Upload of images
    $scope.upload = function () {
        //console.log($scope.files);
            if (document.getElementById("file").files.length === 0) {
                alert('No file was selected');
                return;
            }
            var parts = document.getElementById("file").value.split("\\");
            var uploadedfilename = parts[parts.length - 1];
            var basefilename = uploadedfilename.split(".")[0];
            var fileextension = uploadedfilename.split(".")[1];
            var currentdate = new Date();
            var formatteddate = $filter('date')(new Date(currentdate), 'MMddyy-hmmssa');
            var filename = basefilename + formatteddate + '.' + fileextension;
            var file = document.getElementById("file").files[0];
            uploadFileSync("/sites/asite", "Images", filename, file);
        }

        //Upload file synchronously
    function uploadFileSync(spWebUrl, library, filename, file)
    {
            console.log(filename);

            var reader = new FileReader();
            reader.onloadend = function(evt) 
            {
                if (evt.target.readyState == FileReader.DONE) 
                {
                    var buffer = evt.target.result;
                    var completeUrl = spWebUrl
                      + "/_api/web/lists/getByTitle('"+ library +"')"
                      + "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?"
                      + "@TargetLibrary='"+library+"'&@TargetFileName='"+ filename +"'";

                    $.ajax({
                        url: completeUrl,
                        type: "POST",
                        data: buffer,
                        async: false,
                        processData: false,
                        headers: {
                            "accept": "application/json;odata=verbose",
                            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                            "content-length": buffer.byteLength
                        },
                        complete: function (data) {      
                            console.log(data);
                        },
                        error: function (err) {
                            alert('failed');
                        }
                    });

                }
            };
            reader.readAsArrayBuffer(file);
        }

这些输出只是推入一个数组,用于Angular UI Carousel:

 // Control of Image Carousel
    $scope.myInterval = 0;

// Population of carousel
$scope.slides = [];

    appImages.query({
        $select: 'FileLeafRef,ID,Created,Title,UniqueId',  
        $filter: 'ReportId eq ' + $routeParams.Id + ' and DisplayinReport eq 1',
    }, function (getimageinfo) {
        // Data is within an object of "value"
        var image = getimageinfo.value;

        // Iterate over item and get ID
        angular.forEach(image, function (imagevalue, imagekey) {

            $scope.slides.push({
                image: '/sites/asite/Images/' + imagevalue.FileLeafRef,
            });
        });
    });

图片轮播在页面上如下:

<div style="height: 305px; width: 300px">
                <carousel interval="myInterval">
                    <slide ng-repeat="slide in slides" active="slide.active">
                        <img ng-src="{{slide.image}}" style="margin:auto;height:300px">
                        <div class="carousel-caption">
                            <h4>Slide {{$index}}</h4>
                            <p>{{slide.text}}</p>
                        </div>
                    </slide>
                </carousel>
            </div>

重要提示:上传到SharePoint库后,图像是横向和颠倒的,因此无论是否输出它们,当它们到达我用作页面显示源的目标库时,它们似乎都是错误的.

如何上载图像以使SharePoint尊重EXIF数据/方向？

Answer 1

它可能与EXIF有关.请参阅JS客户端Exif方向:旋转和镜像JPEG图像

如果你想要一个更好的答案,我们将需要显示图像的代码和代码服务器端.

更新:我不是SharePoint上的专家,但您可以在SharePoint Stack Exchange中找到很多相关信息.例如,https://sharepoint.stackexchange.com/questions/131552/sharepoint-rotating-pictures-in-library应该可以解决问题.

总结一下:在你的情况下,他们可能会有很多案例需要学习.因此,我建议您自动更正exif,然后允许您的用户在自动更正错误时进行更正.他们有很多工具可以做到这一点.如果您想在服务器端执行此操作,请查看上面的链接,如果您想在客户端执行此操作,则可以使用JS-Load-Image.