如何将上传的竖版图片转为横版？代码修改位置咨询

一、快速实现：CSS强制旋转竖版图片 #

修改你的showMyImage函数，在图片加载完成后判断宽高比，对竖版图片添加旋转样式：

function showMyImage(fileInput) {
    var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {           
        var file = files[i];
        var imageType = /image.*/;     
        if (!file.type.match(imageType)) {
            continue;
        }           
        var img=document.createElement("img");
        img.style.width = "20%";
        img.style.marginTop = "10px";
        img.alt = "image";
        img.classList.add("thumbnail");
        var reader = new FileReader();
        reader.onload = (function(aImg) { 
            return function(e) { 
                aImg.src = e.target.result;
                // 图片加载完成后判断是否为竖版，是则旋转90度
                aImg.onload = function() {
                    if (this.height > this.width) {
                        this.style.transform = "rotate(90deg)";
                        // 调整margin避免旋转后偏移
                        this.style.margin = "50px 0";
                    }
                };
            }; 
        })(img);
        reader.readAsDataURL(file);
        var gallery = document.querySelector(".gallery");
        var div = document.createElement("div");
        div.style.display = "inline-block";
        div.appendChild(img);
        gallery.appendChild(div);
    }    
}

这段代码会自动识别竖版图片（高度大于宽度）并旋转为横版显示，同时调整margin避免布局偏移。

二、更准确的方案：处理图片EXIF旋转信息 #

很多手机拍摄的竖版图片，实际像素是横版的，只是EXIF元数据标记了旋转角度导致显示为竖版。这种情况需要读取EXIF信息来正确旋转：

步骤1：引入EXIF处理工具 #

使用exif-js库（可自行下载到本地引入）。

步骤2：修改showMyImage函数 #

function showMyImage(fileInput) {
    var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {           
        var file = files[i];
        var imageType = /image.*/;     
        if (!file.type.match(imageType)) {
            continue;
        }           
        var img=document.createElement("img");
        img.style.width = "20%";
        img.style.marginTop = "10px";
        img.alt = "image";
        img.classList.add("thumbnail");
        
        // 读取图片EXIF旋转信息
        EXIF.getData(file, function() {
            var orientation = EXIF.getTag(this, "Orientation");
            var reader = new FileReader();
            reader.onload = (function(aImg, orient) { 
                return function(e) { 
                    aImg.src = e.target.result;
                    aImg.onload = function() {
                        // 根据EXIF标记的方向旋转图片
                        switch(orient) {
                            case 3: // 旋转180度
                                aImg.style.transform = "rotate(180deg)";
                                break;
                            case 6: // 顺时针旋转90度（竖版转横版）
                                aImg.style.transform = "rotate(90deg)";
                                aImg.style.margin = "50px 0";
                                break;
                            case 8: // 逆时针旋转90度
                                aImg.style.transform = "rotate(-90deg)";
                                aImg.style.margin = "50px 0";
                                break;
                            default:
                                break;
                        }
                    };
                }; 
            })(img, orientation);
            reader.readAsDataURL(file);
        });
        
        var gallery = document.querySelector(".gallery");
        var div = document.createElement("div");
        div.style.display = "inline-block";
        div.appendChild(img);
        gallery.appendChild(div);
    }    
}

优化CSS布局 #

旋转后可能出现布局错位，调整.gallery的CSS：

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center; /* 对齐旋转后的图片 */
}
.gallery > div {
    margin-right: 10px;
    margin-bottom: 20px; /* 增加底部间距避免重叠 */
}

内容的提问来源于stack exchange，提问作者Keksi