CSSスクエアアップロード前のサムネイルプレビュー

Question

私は画像アップロードのサインアップフォームを持っています。ユーザーが画像を選択すると、画像のプレビューが表示されます。私はそれが正方形に見えるようにしたい。これは、画像が横長の場合はうまく動作しますが、縦長の画像は正方形ではありません。

画像がポートレートの場合、プレビュー画像（.portrait）にクラスを追加したいと思います。そして、ユーザーが画像をランドスケープに変更することを決定した場合、このクラスを削除します。

このコードは変更されるクラスを除いて問題なく動作しています。

ありがとうございます。

function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
    var i; 
 
    for (i = 0; i < input.files.length; ++i) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
     $('#profile-image-preview').html('<img src="' + e.target.result + '">'); 
 
     } 
 
     reader.readAsDataURL(input.files[i]); 
 
    } 
 
    } 
 
} 
 

 

 
function imageOrientation() { 
 

 
    $('#profile-image-preview img').each(function() { 
 
    if ($(this).width() > $(this).height()) { 
 

 
     $(this).addClass('landscape'); 
 

 
    } else { 
 

 
     $(this).removeClass('landscape'); 
 

 
    } 
 
    }); 
 

 
}; 
 

 
$("#imageUpload").change(function() { 
 
    readURL(this); 
 
    imageOrientation(); 
 
});

#profile-image-preview { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 

 
#profile-image-preview img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    height: 100%; 
 
    width: auto; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#profile-image-preview img.portrait { 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<input type="file" id="imageUpload" style="margin: 15px 0; display: block;" /> 
 
<div id="profile-image-preview"></div>

Answer 1

あなたはそれが変更にリフレッシュしので、その目立たない小さな値に設定する作るために機能上のsetTimeout(imageOrientation,100)を使用する必要があります。 0のonchangeに初期化されたフラグ変数を使用し、関数を2回実行した後、関数から2回戻ります。 それとともに

if (flag == 1) 
    return; 
    flag = 1; 
    setTimeout(imageOrientation, 100); 

がそれぞれの高さと幅で肖像と風景ために別々のクラスを定義する（のonchangeがトリガされたときに0にフラグを初期化することを確認してください）：

#profile-image-preview.landscape { 
    height: 100%; 
    width: auto; 
} 

#profile-image-preview.portrait { 
    width: 100%; 
    height: auto; 
} 

var flag; 
 
function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
    var i; 
 
    for (i = 0; i < input.files.length; ++i) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
     $('#profile-image-preview').html('<img src="' + e.target.result + '">'); 
 
     } 
 
     reader.readAsDataURL(input.files[i]); 
 
    } 
 
    } 
 
} 
 

 

 
function imageOrientation() { 
 
    $('#profile-image-preview img').each(function() { 
 
    if ($(this).width() > $(this).height()) { 
 
     $(this).removeClass('portrait'); 
 
     $(this).addClass('landscape'); 
 
    } else { 
 
     $(this).addClass('portrait'); 
 
     $(this).removeClass('landscape'); 
 
    } 
 
    }); 
 
    if (flag == 1) 
 
    return; 
 
    flag = 1; 
 
    setTimeout(imageOrientation, 100); 
 
}; 
 

 
$("#imageUpload").change(function() { 
 
    flag = 0; 
 
    readURL(this); 
 
    imageOrientation(); 
 
});

#profile-image-preview { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 

 
#profile-image-preview img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#profile-image-preview img.landscape { 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
#profile-image-preview img.portrait { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<input type="file" id="imageUpload" style="margin: 15px 0; display: block;" /> 
 
<div id="profile-image-preview"></div>