图像剪裁中心

Question

图像剪裁中心

6

我希望我的图像可以在中心被裁剪，并能够左右上下移动，同时保持覆盖整个屏幕以适应整个屏幕。用户只能看到图像的某一部分，并且可以像下面的链接一样移动，但他的视点是适合屏幕的小矩形。到目前为止，我只得到了我图像的左上角被裁剪的效果。

如果我没有表达清楚我想要实现的效果，请参考以下链接，但用户不能看到更多的正方形。 https://www.w3schools.com/howto/howto_js_image_zoom.asp 如果您偶然遇到这个问题，我很快就会关闭这张门票。如果您碰巧遇到这个问题，请查看这个问题，我相信我在这里已经尽可能清楚了。如何自由裁剪您的图像

<style>
img {
    background-position: cover;
    position: absolute;
    clip:rect(0px,500px,500px,0px);
}
.image1 { 
background: url(images/bg.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>

<div class='clipper-div'>
   <img class='image1' src='office.gif'/>  
</div>

- scriver

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amessihel · Accepted Answer

你要找的是一种插图剪辑：

clip-path: inset(top bottom left right);

您可以监听鼠标移动事件以更新剪辑。在下面的示例中，我使用了添加到clipper-element样式定义中的CSS自定义属性。

这些自定义属性被用作剪辑定义的CSS变量。

// Globals variables (we could store them into an object,
// which would be a cleaner way
var clipperDiv = document.getElementById("clipper-div");
var hoveringClippedImg = document.getElementById("hovering-clipped");
var imgBoundingRect = hoveringClippedImg.getBoundingClientRect();
var clippingSize = 40;

// Surrouding DIV element mouse move event callback
clipperDiv.onmousemove = clipHoveredArea;

// Update image clipping

function clipHoveredArea(e) {

  // First step: getting clipping coordinates from mouse position
  var pos = getMousePos(e);
  var top = (pos.y - clippingSize / 2);
  var bottom = (imgBoundingRect.height - pos.y - (clippingSize / 2));
  var left = (pos.x - clippingSize / 2);
  var right = (imgBoundingRect.width - pos.x - clippingSize / 2);

  // Second step: CSS custom properties
  hoveringClippedImg.style.setProperty("--top", top + "px");
  hoveringClippedImg.style.setProperty("--bottom", bottom + "px");
  hoveringClippedImg.style.setProperty("--left", left + "px");
  hoveringClippedImg.style.setProperty("--right", right + "px");

};

// Get mouse position relative to an element
// Source: //stackoverflow.com/a/42111623/4375327

function getMousePos(e) {
  // e = Mouse click event.
  var rect = e.currentTarget.getBoundingClientRect();
  var x = e.clientX - Math.round(rect.left);
  var y = e.clientY - Math.round(rect.top);
  return {
    x: x,
    y: y
  };
}

#clipper-div {
  border: 2px solid black;
  width: 200px;
  height: 200px;
}

#hovering-clipped {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 200px;
  clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
  --top: 0px;
  --right: 0px;
  --bottom: 0px;
  --left: 0px;
  cursor: crosshair;
}

<div id='clipper-div'>
  <img id="hovering-clipped"
       src="//placehold.it/200x200/d0d8f8/000000" />
</div>

注意：我使用了 Clippy。这是一个方便的工具，可以设计您想要的剪贴内容。