如何縮放（調整大小）圖像保持javascript中的寬高比

Question

我有一些隨機尺寸的圖像，問題是我如何將其縮放（調整大小）到960×1280，例如在JavaScript中，但保持圖像原始寬高比：

• 如果圖像是比預期的大小越大 ，它被按比例縮小 （保持縱橫比）和在空區域中填充有透明的顏色。
• 如果圖像小於預期大小，則不會縮放圖像，而是居中，空白區域用透明色填充。

我已經閱讀了一些關於這個主題的內容，但仍無法解決問題。

這對我不起作用： 如何按比例調整圖像大小/保持縱橫比？

更新：工作解決方案，非常感謝@Mr。 Polywhirl 更新解決方案

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 contains

  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>