画布图像：中心宽图像并隐藏溢出

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                                                  |
+---------------------------------------------------------+
       |                                           |
       +-------------------------------------------+

从这里获取的解决方案（和插图）： center oversized image in div

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