畫布圖像：中心寬圖像並隱藏溢出

Question

我有一個非常寬的圖像，超過大多數查看寬度，必須使用<canvas>標記呈現。我將如何隱藏溢出並將圖像居中？

換句話說，我正在尋找相當於background-position: center的畫布。

理想情況下，這將以響應的方式完成 - 因此如果查看窗口大小調整，圖像保持居中。

下面是一個例子：

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>

注：沒有出現在佔位符文本Center，但當前不可見

Answer 1

此代碼應該做的事你需要。 應將圖像寬度設置爲canvas.width以避免圖像溢出畫布。 圖像高度現在相對於圖像寬度，因此比例保持不變。 我已經包括一個事件監聽器，它將調整您的畫布/圖像的大小的窗口。

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

對於你剛纔畫，你想讓它像畫布。它不會添加滾動條。該示例加載圖像並將其置於畫布上。您可以單擊以查看縮放的圖像（請參閱所有圖像），填充（請參閱全高或全寬，以適合填充的畫布爲準），然後再次單擊以全分辨率爲中心。

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

感謝您的反饋 - 建議的解決方案與解決畫布問題的工作。

我發現了另一種解決方案，即將畫布作爲其他任何超大元素並使用CSS來處理。從這裏取出

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

溶液（和插圖）： center oversized image in div

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