Wie skalieren (Größe ändern) Bild beibehalten Seitenverhältnis in Javascript

Question

Ich habe einige Bilder mit zufälligen Dimension und die Frage ist, wie kann ich skalieren (Größe) auf genau 960 × 1280 zum Beispiel in JavaScript, aber behalten Bildursprung Aspekt Verhältnis:

• Wenn das Bild größer als die erwartete Größe ist, ist es verkleinert werden (wobei Seitenverhältnis) und die leeren Bereiche mit transparenter Farbe gefüllt.
• Wenn das Bild kleiner als die erwartete Größe ist, ist es nicht skaliert aber zentriert und die leeren Bereiche sind mit transparenten Farbe gefüllt.

Ich hatte etwas zu diesem Thema gelesen, konnte das Problem aber immer noch nicht lösen.

Dies ist für mich nicht funktioniert: How to resize images proportionally/keeping the aspect ratio?

AKTUALISIERT: Arbeitslösung hier, vielen Dank an @Mr. Polywhirl Update solution

Answer 1

Um das Seitenverhältnis, um herauszufinden, für die Skalierung zu verwenden, müssen Sie, um herauszufinden, welche Dimension größer ist. Wenn Sie das tun, teilen Sie die Bildbreite/-höhe nur durch die Breite/Höhe des Betrachters und das sollte den Skalierungsfaktor bestimmen.

Die Zentrierung kann durch Auffinden des Versatzes des skalierten Bildes im Viewer erreicht werden.

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

Hier ist eine Lösung. Grundsätzlich ist es meistens CSS, aber wir verwenden JS, um die Bildmaße zu erhalten. Wenn eine Dimension größer ist als unsere Grenzen (x> 960 oder y> 1280), stellen Sie die 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>