如何在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>

我會用這種方法，有些變化來調整圖像