javascript - 拍摄图像并将其分成 3 个相等的部分

Question

我尝试搜索，但没有找到一种方法来专门执行我正在寻找的操作。甚至不确定是否可以做到，但认为这个美好的社区可以提供帮助。

我想拍摄一张图像，将其分成 3 个相等的部分(左、中、右)，然后执行我要执行的操作。

我希望能够在 DOM 中获取一个容器，用 5-6 张图像填充它，然后将其分割并放入 3 个图像中，而不是从一开始就将其设置为 3 个图像相同大小的容器。

我知道如何轻松完成其余的工作，只是不确定如何在 JavaScript 中从 DOM 中获取图像并将其分成 3 个相等的部分。

我不想做canvas或svg等。

这可能吗？

谢谢!

Answer 1

我不知道你到底是什么意思。你想制作一个里面有 3 个等于 block 的容器吗？或者将图像显示为 3 个独立的部分？

<style>
  .inner {
    float: left;
    width: 33%
  }
</style>

<div class="container">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

如果你想要其中3张图片，你可以将其设置为背景并稍微移动它。例如:

.inner {
    background-image: url('myimage.png');
    background-size: 100% 100%;
}
.inner:nth-of-type(1) { background-position: 0px 0px; }
.inner:nth-of-type(2) { background-position: 0px -33% }
.inner:nth-of-type(3) { background-position: 0px -66px }

由于缺乏信息，我无法透露更多信息。