javascript中保持纵横比的base64图像降维

我有一个用于图像的base64字符串，我必须将其显示为图标。如果图像的尺寸更大，我必须显示保持纵横比的图标。 我已经写了一个逻辑来确定图像是横向的还是纵向的，基于画布的高度和宽度。但图标的高度和宽度似乎不合适，因为我已经硬编码了

      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");          
      var height, width;
      if (this.height>this.width) {
            height = 50;
            width = 30;
      } else if (this.height<this.width) {
            height = 30;
            width = 50;
      }
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(image,
            0, 0, this.width, this.height,
            0, 0, canvas.width, canvas.height
      );
      var scaledImage = new Image();
      scaledImage.src = canvas.toDataURL();

var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
高度、宽度；
如果（此高度>此宽度）{
高度=50；
宽度=30；
}否则，如果（this.height你只需要计算比例或比率，然后将两个维度乘以它。这是一个示例函数，这是你的

创建修剪、缩放的图像：


函数scaleDataURL（dataURL、maxWidth、maxHeight）{
返回新承诺（完成=>{
var img=新图像；
img.onload=（）=>{
var比例、新宽度、新高度、画布、ctx；
如果（img.width

或者，如果希望图像始终为提供的尺寸，周围区域为空，则可以使用以下选项：（）

创建精确提供尺寸的缩放图像：


函数scaleDataURL（dataURL、maxWidth、maxHeight）{
返回新承诺（完成=>{
var img=新图像；
img.onload=（）=>{
var比例、新宽度、新高度、画布、ctx、dx、dy；
如果（img.width
当然，你可以动态计算，但你没有提供足够的信息……你想按一定的比例缩放它吗？你有一个最大的宽度或高度要缩放它吗？一个最大的文件大小？你想如何缩放它？如果你想保持纵横比，而你的图像不适合这个比例，你的图像将要么留空s或被截断，您想要哪一个？图标大小是正方形，比如说75*75。如果它的横向是全宽的，如果它的纵向是全高的。@Iwrestledabearonce@Kaddath剩余区域我可以保持空白。如果图像宽度大于目标画布宽度，效果不太好
function scaleDataURL(dataURL, maxWidth, maxHeight){
  return new Promise(done=>{
    var img = new Image;
    img.onload = ()=>{
      var scale, newWidth, newHeight, canvas, ctx;
      if(img.width < maxWidth){
        scale = maxWidth / img.width;
      }else{
        scale = maxHeight / img.height;
      }
      newWidth = img.width * scale;
      newHeight = img.height * scale;
      canvas = document.createElement('canvas');
      canvas.height = newHeight;
      canvas.width = newWidth;
      ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, newWidth, newHeight);
      done(canvas.toDataURL());
    };
    img.src = dataURL;
  }); 
}

function scaleDataURL(dataURL, maxWidth, maxHeight){
  return new Promise(done=>{
    var img = new Image;
    img.onload = ()=>{
      var scale, newWidth, newHeight, canvas, ctx, dx, dy;
      if(img.width < maxWidth){
        scale = maxWidth / img.width;
      }else{
        scale = maxHeight / img.height;
      }
      newWidth = img.width * scale;
      newHeight = img.height * scale;
      canvas = document.createElement('canvas');
      canvas.height = maxWidth;
      canvas.width = maxHeight;
      ctx = canvas.getContext('2d');
      dx = (maxWidth - newWidth) / 2;
      dy = (maxHeight - newHeight) / 2;
      console.log(dx, dy);
      ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, newWidth, newHeight);
      done(canvas.toDataURL());
    };
    img.src = dataURL;
  }); 
}