Question

我有一个带图片上传的注册表单。当用户选择图像时，将显示其预览。我希望它显得方正。当图像是风景时，这种方法很好，但是肖像图像不是方形的。

如果图像是纵向的，我想在预览图像（.portrait）中添加一个类。如果用户决定将图像更改为横向，则删除此类。

除了要更改的类之外，此代码工作正常。

谢谢。

＆＃13;

promise

＆＃13;

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();
});

＆＃13;

#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;
}

＆＃13;

Answer 1

您需要在该功能上使用like以使其在更改时刷新并将其设置为较小的值，以使其不明显。使用一个标志变量，在变换时初始化为0，并且在运行函数两次后从函数返回。 （确保在触发onchange时将标志初始化为0 ）

setTimeout(imageOrientation,100)

同时定义肖像和风景的单独类，各自的高度和宽度：

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

#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%;
}

上传CSS Square缩略图预览

1 个答案: