Canvas 图片：居中宽幅图片并隐藏溢出

Question

我有一张非常宽的图片，超过了大部分的查看宽度，必须使用 <canvas> 标签进行渲染。如何隐藏溢出并使图像居中？

换句话说，我正在寻找等同于 background-position: center 的 canvas。

理想情况下，这将以一种响应式的方式完成 - 因此如果调整视图 window 的大小，图像将保持居中。

这是一个例子：

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以避免图像溢出canvas。图像高度现在是相对于图像宽度的，所以比例保持不变。我已经包含了一个事件侦听器，它将您的 canvas/image 调整为 window 的大小。

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

对于 canvas，您只需在需要的位置绘制图像即可。它不会添加滚动条。该示例加载图像并将其置于 canvas 的中心。您可以单击以查看图像缩放以适合（查看所有图像）、填充（查看全高或全宽，以最适合填充 canvas 为准）并再次单击以全分辨率居中查看。

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

感谢您的反馈 - 建议的解决方案适用于解决 canvas 问题。

我找到了另一个解决方案，即像对待任何其他超大元素一样对待 canvas 并使用 CSS.

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

解决方案（和插图）取自此处： center oversized image in div

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

Canvas 图片：居中宽幅图片并隐藏溢出

Canvas image: center wide image and hide overflow

html

css

canvas

centering

responsive