画布图像:中心宽图像和隐藏溢出

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() {
	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                                                  |
+---------------------------------------------------------+
|                                           |
+-------------------------------------------+

解决方案(和插图(取自此处： 在div 中居中超大图像

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