上传从手机拍摄的图像时，Plupload 预览图像会出现倒置或侧向显示答案

【问题标题】：Plupload preview image appears upside down or sideways when uploading images taken from mobile上传从手机拍摄的图像时，Plupload 预览图像会出现倒置或侧向显示
【发布时间】：2016-10-08 00:35:56
【问题描述】：

我正在使用 Plupload 2.1.9，核心 API 我在上传前显示图像的预览，有些图像出现倒置或侧向

我在谷歌上搜索了很多关于这个问题的信息，从 stackoverflow 到 github ...论坛，没有找到

所以我在 UI Widget 的 plupload 网站上的示例部分进行了测试，同样的问题

Plupload Example on the plupload website (UI Widget)

如果您在手机上尝试演示，您会发现预览图像没有以正确的方向显示

我想提一下，在我的应用程序中，即使预览出现颠倒，一旦上传，它就会以正确的方向上传，（因为我在 plupload 选项中设置了 preserve_headers: false）

Preview before upload on my website

显示方向错误的图像来自手机，在计算机上调整大小，效果很好。

一些研究提到了图像中的 exif 数据，但这让我现在知道了

这是我的代码示例：

uploader.bind('FilesAdded', function(up, files) {
 
        //maximum number of allowed files to add
        max_files = 5 - nb_images;
                     
        if (up.files.length > max_files) {
            up.splice(max_files);
        }
 
        $.each(files, function(i, file){
             
            img = new mOxie.Image();
 
            img.onload = function() {
 
                 thumb_wrapper = $('<div/>', { class: 'thumbnail pull-left', id: file.id }).appendTo('#files');
 
                $("#files .thumbnail").css("position", "relative");
 
                this.crop({
                    width: 120,
                    height: 120,
                    preserveHeaders: true
                });
 
                this.embed(thumb_wrapper.get(0), {
                    /*width: 120,
                    height: 120,*/
                    crop: true
                });
 
                //initialize the remove button
                 removeBtn = "<a href='javascript:void(0)' class='img-del' style='background: #CC0000; color: #FFF; width: 25px; height:25px; position:absolute; right:4px; padding-top: 3px;'>";
 
                removeBtn = removeBtn + "<strong>X</strong>";
 
                removeBtn = removeBtn + "</a>";
 
                $("#" + file.id).append(removeBtn);
 
            };
 
            img.onembedded = function() {
                this.destroy();
            };
 
            img.onerror = function() {
                this.destroy();
            };
 
            img.load(this.getSource());   
             
        });
         
    });

将 preserveHeaders 更改为 false，不会有任何影响

任何帮助将不胜感激

【问题讨论】：

标签： javascript jquery image file-upload plupload

【解决方案1】：

好的，这可能会对遇到相同问题的人有所帮助，我希望 Plupload 的开发人员能够调试问题

经过一番研究，我发现了这个 stackoverflow 链接：

Plupload Html5 preview after Fileselect

这导致我在答案中找到了 jsfiddle：

[http://jsfiddle.net/Ec3te/2/][2]

通过使用我之前上传时使用的相同图片进行测试，预览以正确的方向显示，并且出现了方向问题。

注意到jsfiddle中plupload.full.min.js文件的版本是：v1.2.1，而plupload v2.1.9自带的版本是：1.3.5

切换那些文件解决了我的预览方向问题

希望在 plupload 的下一个版本中修复此问题

问候，

【讨论】：