Canvas Bild: Center Wide Bild und ausblenden Überlauf

Question

Ich habe ein sehr breites Bild, das meist Sichtweiten überschreitet und muss mit einem <canvas> Tag gerendert werden. Wie würde ich den Überlauf verstecken und auch das Bild zentrieren?

Mit anderen Worten, ich bin auf der Suche nach der Leinwand gleich background-position: center.

Im Idealfall würde dies reaktionsschnell ausgeführt werden. Wenn das Anzeigefenster in der Größe geändert wird, bleibt das Bild zentriert.

Hier ist ein Beispiel:

window.onload = function() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var img = document.getElementById("image"); 
 
    ctx.drawImage(img, 0, 0); 
 
};

.container { 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
} 
 

 
canvas { 
 
    overflow: hidden; 
 
} 
 

 
.canvasContainer { 
 
    width: 100%; 
 
    overflow-x: hidden; 
 
} 
 

 
img { 
 
    display: none; 
 
}

<div class="container"> 
 
    <div class="canvasContainer"> 
 
    <img id="image" src="http://via.placeholder.com/2400x800?text=center" /> 
 
    <canvas id="canvas" width="2400" height="800" /> 
 
    </div> 
 
</div>

Hinweis: Es gibt einen Text Center in dem Platzhalter ist, ist aber derzeit nicht sichtbar

Answer 1

Dieser Code sollten Sie tun, was brauchen. Die Bildbreite sollte auf canvas.width festgelegt werden, um zu verhindern, dass das Bild über die Zeichenfläche hinausläuft. Die Bildhöhe ist jetzt relativ zur Bildbreite, so dass das Verhältnis gleich bleibt. Ich habe einen Event-Listener eingefügt, der die Leinwand/das Bild an die Größe des Fensters anpasst.

function init() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var img = document.getElementById("image"); 
 
    var canHeight = window.innerWidth/4; 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = canHeight; 
 
    var width = canvas.width; 
 
    ctx.drawImage(img, 0, 0, width, canHeight); 
 
} 
 

 
init(); 
 
    
 
    window.addEventListener('resize', function() { 
 
    \t canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
    init(); 
 
    });

Answer 2

Für die Leinwand Sie einfach das Bild ziehen, wo Sie es wollen. Es werden keine Bildlaufleisten hinzugefügt. Das Beispiel lädt das Bild und zentriert es auf der Leinwand. Sie können klicken, um das Bild skaliert zu sehen (sehen Sie das gesamte Bild), füllen (siehe volle Höhe oder volle Breite, die am besten die Leinwand füllt) und klicken Sie erneut, um mit voller Auflösung zentriert zu sehen.

const image = new Image(); 
 
image.src = "http://via.placeholder.com/2400x800"; 
 
image.onload = showImage; 
 

 

 
    
 
addEventListener("resize",showImageFit) 
 
function drawText(text){ 
 
    const ctx = canvas.getContext("2d"); 
 
    ctx.font = "28px arial"; 
 
    ctx.textAlign = "center"; 
 
    ctx.fillText(text,canvas.width/2, 28); 
 
} 
 

 

 
function showImage(){ 
 
    canvas.width = innerWidth - 8; 
 
    canvas.height = innerHeight - 8; 
 
    const x = (canvas.width/2 - image.naturalWidth/2) | 0; 
 
    const y = (canvas.height/2 - image.naturalHeight/2) | 0; 
 
    canvas.getContext("2d").drawImage(image,x,y); 
 
    drawText("Click to scale image to fit"); 
 
    canvas.onclick = showImageFit; 
 
} 
 

 
function showImageFit(){ 
 
    canvas.width = innerWidth - 8; 
 
    canvas.height = innerHeight - 8; 
 
    const scale = Math.min(canvas.width /image.naturalWidth , canvas.height/image.naturalHeight); 
 
    const x = (canvas.width/2 - (image.naturalWidth/2) * scale) | 0; 
 
    const y = (canvas.height/2 - (image.naturalHeight/2) * scale) | 0; 
 
    canvas.getContext("2d").drawImage(image,x,y,image.naturalWidth * scale, image.naturalHeight * scale); 
 
    drawText("Click to scale image to fill"); 
 
    canvas.onclick = showImageFill; 
 
} 
 
function showImageFill(){ 
 
    canvas.width = innerWidth - 8; 
 
    canvas.height = innerHeight - 8; 
 
    const scale = Math.max(canvas.width /image.naturalWidth , canvas.height/image.naturalHeight); 
 
    const x = (canvas.width/2 - (image.naturalWidth/2) * scale) | 0; 
 
    const y = (canvas.height/2 - (image.naturalHeight/2) * scale) | 0; 
 
    canvas.getContext("2d").drawImage(image,x,y,image.naturalWidth * scale, image.naturalHeight * scale); 
 
    
 
    drawText("Click to see image at full resolution and centered"); 
 
    canvas.onclick = showImage; 
 
}

canvas { 
 
    border : 2px solid black; 
 
} 
 
body { 
 
    margin : 0px; 
 
}

<canvas id="canvas"></canvas>

Answer 3

Danke für das Feedback - die vorgeschlagenen Lösungen arbeiten, um die Leinwand Problem zu lösen.

Ich fand eine andere Lösung, die die Leinwand wie jedes andere übergroße Element behandeln und CSS verwenden sollte.

 +-------------------------------------------+ 
     | page container       | 
+---------------------------------------------------------+ 
|               | 
| canvas             | 
+---------------------------------------------------------+ 
     |           | 
     +-------------------------------------------+ 

Solution (und Abbildung) von hier genommen: center oversized image in div

margin-left: 50%; 
transform: translateX(-50%);