如何在JavaScript中缩放（调整大小）图片保持宽高比

Question

我有一些随机尺寸的图片，问题是如何在JavaScript中将其缩放（调整大小）至960×1280，但保留图片原点方面比：

• 如果图像比预期大小更大，它是缩小（保持纵横比）和在空区域中填充有透明的颜色。
• 如果图像是较小比预期的大小，它是不缩放但中心和空白区域填充透明颜色。

我已阅读了一些关于此主题但仍无法解决的问题。

这不是为我工作：How to resize images proportionally/keeping the aspect ratio?

更新：在这里工作的解决方案，很多谢来@Mr。 Polywhirl Update solution

Answer 1

为了找出用于缩放的宽高比，您需要确定哪个维度更大。你可以这样做，你只需将图像的宽度/高度除以观察者的宽度/高度即可确定比例因子。

居中可以通过查找缩放图像在查看器中的偏移来实现。

var ctx = document.getElementById('image-viewer').getContext('2d'); 
 
var images = [ 
 
    'http://i.imgur.com/5PF0Xdi.jpg', 
 
    'http://i.imgur.com/po0fJFT.png', 
 
    'http://i.imgur.com/Ijzdt0o.png' 
 
]; 
 
var counter = 0; 
 

 
// Load a new image after 2 seconds. 
 
setInterval(function() { 
 
    loadScaleAndCenterImage(ctx, images[counter++ % images.length]); 
 
}, 2000); 
 

 
function loadScaleAndCenterImage(ctx, url) { 
 
    var imageObj = new Image(); 
 
    imageObj.onload = function(e) { 
 
    var ctxWidth = ctx.canvas.width, 
 
     ctxHeight = ctx.canvas.height; 
 
    var imgWidth = imageObj.width, 
 
     imgHeight = imageObj.height; 
 
    var ratioWidth = imgWidth/ctxWidth, 
 
     ratioHeight = imgHeight/ctxHeight, 
 
     ratioAspect = ratioWidth > 1 ? ratioWidth : ratioHeight > 1 ? ratioHeight : 1; 
 
    var newWidth = imgWidth/ratioAspect, 
 
     newHeight = imgHeight/ratioAspect; 
 
    var offsetX  = (ctxWidth/2) - (newWidth/2), 
 
     offsetY  = (ctxHeight/2) - (newHeight/2); 
 
    ctx.clearRect(0, 0, ctxWidth, ctxHeight); 
 
    ctx.drawImage(this, offsetX, offsetY, newWidth, newHeight); 
 
    }; 
 

 
    imageObj.src = url; 
 
}

#image-viewer { 
 
    background-color: #E4E4E4; 
 
    background-image: 
 
    linear-gradient(45deg, #7F7F7F 25%, transparent 25%, transparent 75%, #7F7F7F 75%, #7F7F7F), 
 
    linear-gradient(45deg, #7F7F7F 25%, transparent 25%, transparent 75%, #7F7F7F 75%, #7F7F7F); 
 
    background-size: 20px 20px; 
 
    background-position: 0 0, 30px 30px 
 
}

<canvas id="image-viewer" width="1280" height="960"></canvas>

Answer 2

这里是一个解决方案。基本上它主要是CSS，但我们使用JS来获取图像尺寸。如果任一尺寸比我们的边界（X> 960或y> 1280）时，设定的CSS propeprty background-size:contain

var onload = function() { 
 
//grab image dimensions on load 
 
     var w = this.width; 
 
     var h = this.height; 
 
     if (w > 960 || h > 1280) { 
 
//set contain if needed 
 
      document.getElementById(this.dataset.div) 
 
        .style.backgroundSize = "contain"; 
 
     } 
 
    }; 
 
//grab all the container divs 
 
    var divs = document.querySelectorAll('.container'); 
 
//iterate thru them 
 
    for (i = 0; i < divs.length; i++) { 
 
     var div = divs[i]; 
 
     var img = new Image; 
 
//set the id of the current div as a data attribute of the img, 
 
//so we can reference it in the onload function 
 
     img.dataset.div = div.id; 
 
//apply onload function 
 
     img.onload = onload; 
 
//set the img src to the background image. use a quick regex to extract 
 
//just the img url from the whole "url(img.ext)" string 
 
     img.src = getComputedStyle(div, 0).backgroundImage 
 
       .match(/url\(['"]?([a-z0-9\/:.]+)['"]{0,1}/i)[1]; 
 
    }

div.container{ 
 
width:960px; 
 
height:1280px; 
 
border:1px solid black; 
 
background-position:center; 
 
background-repeat:no-repeat; 
 
background-color:transparent; 
 
/*background-image:url(/path/to/img.ext);*/ 
 
} 
 
div#container-1{ 
 
background-image:url(http://i.imgur.com/5PF0Xdi.jpg); 
 
} 
 
div#container-2{ 
 
background-image:url(http://i.imgur.com/po0fJFT.png); 
 
} 
 
div#container-3{ 
 
background-image:url(http://i.imgur.com/Ijzdt0o.png); 
 
}

<div class="container" id="container-1"></div> 
 
<div class="container" id="container-2"></div> 
 
<div class="container" id="container-3"></div>

我会用这种方法，有些变化来调整图像