Question

嗨我有一个可调整大小的jquery div，以及这个div中的图像。

＆＃13;

$( function() {
  var inputLocalFont = document.getElementById("user_file");
  inputLocalFont.addEventListener("change",previewImages,false);
  function previewImages(){
    var fileList = this.files;
    var anyWindow = window.URL || window.webkitURL;
    for(var i = 0; i < fileList.length; i++){
      var objectUrl = anyWindow.createObjectURL(fileList[i]);
      $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>');
      window.URL.revokeObjectURL(fileList[i]);
    }

    $( ".img-div" ).draggable();
    $( ".img-div" ).resizable();
    $(".newly-added").on("click", function(e) {
      $(".newly-added").removeClass("img-selected");
      $(this).addClass("img-selected");
      e.stopPropagation();
    });
    $(document).on("click", function(e) {
      if ($(e.target).is(".newly-added") === false) {
        $(".newly-added").removeClass("img-selected");
      }
    });
  } 
});

＆＃13;

.new-multiple {
  width:400px !important;
  height:400px !important;
  background:white;
  border:2px solid red;
  overflow:hidden;
}
  
.img-div {
  width:200px;
  height:200px;
} 

.newly-added {
  width:100%;
  height:100%;
} 

.img-selected{
  box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
}

＆＃13;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input   name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">
<div class="new-multiple"></div>

＆＃13;

https://jsfiddle.net/vd11qyzv/7/

这里我必须手动设置图像宽度，div宽度以进行初始加载

.img-div{
   width:200px;
   height:200px;
 } 
 .newly-added{
    width:100%;
    height:100%;
}

如果我没有使用此css，那么resizable将无效。

但我不想这样做。因为上传的图像会因为手动宽度和高度而被拉伸或放大。原始图像尺寸将丢失。

我们如何解决这个问题？

Answer 1

首先，这里有很多有用的信息：How to get image size (height & width) using JavaScript?

请在发布前先研究您的问题。

其次，使用我在上一个问题中提供的示例，我们可以使用JavaScript var img = new Image();来创建图像对象，而不是在DOM或Markup中，然后获取尺寸一旦加载就从它开始。

<强>段

  var imgDim = {
    width: 0,
    height: 0
  };
  var newImg = new Image();
  $(newImg).attr({
    src: objectUrl,
    id: "img-" + key,
    class: "newly-added"
  }).load(function(e) {
    imgDim.width = this.width;
    imgDim.height = this.height;
    $(newImg).appendTo($newDiv).css({
      width: imgDim.width + "px",
      height: imgDim.height + "px"
    });
  });
  $(newImg).resizable();
  window.URL.revokeObjectURL(val);

工作示例：https://jsfiddle.net/Twisty/vd11qyzv/12/

<强>更新

如果要调整图像大小并保留比例，可以使用设置的宽度或高度执行此操作，并从中计算比率值。例如，如果要将宽度设置为200像素：

Nw = 200
Nh = Ih * (200/Iw)

<强>段

imgDim.width = 200;
imgDim.height = Math.floor(this.height * (200 / this.width));

如果您的原始尺寸为1536 x 2048，则会产生200 x 266.工作示例：https://jsfiddle.net/Twisty/vd11qyzv/15/

Answer 2

我在代码中做了一些更改，并且更新js小提琴链接是https://jsfiddle.net/prashantchaurasia/dksqu2hb/6/

css updated of following classes
.new-multiple{
  width:auto;
  height:auto;
  background:white;
  border:2px solid red;
  overflow:hidden;
  display: inline-block;
}
.img-div{

} 
.newly-added{

}

基于内部图像宽度和宽度的Div宽度和高度。 jquery resizable（）函数中的高度

2 个答案: