Question

我尝试过搜索，但没有找到方法专门做我正在寻找的事情。甚至不确定它是否可以完成，但认为这个美妙的社区可以提供帮助。

我想拍一张照片，把它分成3个相同的部分（左，中，右），然后做我将要做的事情。

我不想仅仅从头开始设置为3件，而是希望能够在DOM中取一个容器，填充说... 5-6个图像然后将被拆分并放入3个等尺寸的容器。

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

我不想做canvas或svg等。

这甚至可能吗？

谢谢！

Answer 1

我不知道你的意思。你想制作一个有3个等于块的容器吗？或者将图像显示为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 }

由于缺乏信息，我无法说清楚。

Answer 2

现在意识到这不可能像我想做的那样。谢谢你的帮助。

Answer 3

好的，所以这些信息之后。一种方法可能是JQuery Crop Plugin。

没有它，我认为你必须创建3个元素并为它们应用背景。

var div = document.createElement("div");
div.style.backgroundImage = "url('myimage.png');";
div.style.backgroundPosition = "0px -33%";
document.body.append(div);

我无法想到其他任何事情，抱歉：C

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

3 个答案: