Question

I have a very wide image that exceeds mostly viewing widths and must be rendered using a <canvas> tag. How would I hide the overflow and also center the image?

In other words, I'm looking for the canvas equivalent to background-position: center.

Ideally, this would be done in a way which is responsive - so if the viewing window is resized, the image stays centered.

Here's an example:

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>

Note: There is a text Center present in the placeholder, but is currently not visible

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

对于画布，您只需在想要的位置绘制图像。它不会添加滚动条。该示例加载图像并将其居中放在画布上。您可以单击以查看缩放以适合的图像（查看所有图像），填充（请参阅完整高度或最适合填充画布的宽度），然后再次单击以查看居中的全分辨率。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

感谢您的反馈 - 建议的解决方案可以解决画布问题。

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

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

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

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

Canvas image: center wide image and hide overflow

3 个答案: