JavaScript使用画布设置高度自动调整图像大小[重复]

Question

如何通过上传不同的图像正确设置图像高度，每次用户上传不同尺寸的图像时，我需要设置固定宽度和高度需要正确适合宽度（我的意思是与宽度成正比）。另外考虑其他更好的解决方案。

$(".upload-button").on('click', function() {
  $(".file-upload").click();
});
var fileReader = new FileReader();

fileReader.onload = function(event) {
  var image = new Image();

  image.onload = function() {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 380;
    //canvas.height=image.height/1;

    $('#upload-preview').width(500); //pixels

    context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
      canvas.width,
      canvas.height
    );

    document.getElementById("upload-preview").src = canvas.toDataURL();
  }
  image.src = event.target.result;
};

var uploadImage = function() {
  var uploadImage = document.getElementById("upload-Image");

  if (uploadImage.files.length === 0) {
    return;
  }

  var uploadFile = document.getElementById("upload-Image").files[0];
  fileReader.readAsDataURL(uploadFile);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-button" id="imageresize"><img id="upload-preview" class="profile-pic" src="add-image.png" /></div>
<input id="upload-Image" class="file-upload" type="file" name="my_file" onchange="uploadImage();" accept="image/*">

Answer 1

我更新了你的代码。我使用纵横比缩小了图像。请检查这是您想要的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-button" id="imageresize"><img id="upload-preview" class="profile-pic" src="add-image.png" /></div>
<input id="upload-Image" class="file-upload" type="file" name="my_file" onchange="uploadImage();" accept="image/*">

<script>
$(".upload-button").on('click', function() {
  $(".file-upload").click();
});
var fileReader = new FileReader();

fileReader.onload = function(event) {
  var image = new Image();

  image.onload = function() {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 500;
    var hRatio = canvas.width  / image.width    ;
   var vRatio =  canvas.height / image.height  ;
   var ratio  = Math.min ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - image.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - image.height*ratio ) / 2;  
   context.clearRect(0,0,canvas.width, canvas.height);
   context.drawImage(image, 0,0, image.width, image.height,
                      centerShift_x,centerShift_y,image.width*ratio, image.height*ratio);
    //canvas.height=image.height/1;

   // $('#upload-preview').width(500); //pixels

    //context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
    //  canvas.width,
    //  canvas.height
    //);

    document.getElementById("upload-preview").src = canvas.toDataURL();
  }
  image.src = event.target.result;
};

var uploadImage = function() {
  var uploadImage = document.getElementById("upload-Image");

  if (uploadImage.files.length === 0) {
    return;
  }

  var uploadFile = document.getElementById("upload-Image").files[0];
  fileReader.readAsDataURL(uploadFile);
}
</script>

Answer 2

Source

计算比例

var hRatio = canvas.width / image.width;
var vRatio = canvas.height / image.height;
var ratio = Math.min(hRatio, vRatio);

context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
      image.width * ratio, image.height * ratio
);

完整代码：

$(".upload-button").on('click', function() {
  $(".file-upload").click();
});
var fileReader = new FileReader();

fileReader.onload = function(event) {
  var image = new Image();

  image.onload = function() {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 380;
    //canvas.height=image.height/1;

    $('#upload-preview').width(500); //pixels

    var hRatio = canvas.width / image.width;
    var vRatio = canvas.height / image.height;
    var ratio = Math.min(hRatio, vRatio);

    context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
      image.width * ratio, image.height * ratio
    );

    document.getElementById("upload-preview").src = canvas.toDataURL();
  }
  image.src = event.target.result;
};

var uploadImage = function() {
  var uploadImage = document.getElementById("upload-Image");

  if (uploadImage.files.length === 0) {
    return;
  }

  var uploadFile = document.getElementById("upload-Image").files[0];
  fileReader.readAsDataURL(uploadFile);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-button" id="imageresize"><img id="upload-preview" class="profile-pic" src="add-image.png" /></div>
<input id="upload-Image" class="file-upload" type="file" name="my_file" onchange="uploadImage();" accept="image/*">