Javascript 拍摄图像并将其分成3等份

我试着搜索，但没有找到一个方法来具体地做我要找的。我甚至不确定这是否可以做到，但我认为这个美好的社区可以提供帮助

我想拍一张照片，把它分成三等份（左，中，右），然后做我要做的事情

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

我知道如何轻松地完成其余的工作，只是不知道如何用javascript从DOM中获取一个图像，将其拆分为3个相等的部分

我不想做画布或svg等

这可能吗

---

谢谢

我不知道你的真正意思。是否要制作一个包含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>

---

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

现在意识到这不可能以我希望的方式实现。谢谢你的帮助。

好的，那么在所有这些信息之后。一种方法可以是JQuery

如果没有它，我认为您必须创建3个元素并对其应用背景

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

---

我想不出其他任何东西，抱歉：C

用树型连续容器替换图像，其中每个容器都以图像为背景。当你正确地定位背景时，你只会得到一幅图像的错觉。我以前读过这篇文章，但唯一的问题是最终我想让这些图像以旋转式的运动进行动画处理，然后确定下一幅图像。我想我可以用图像制作一个巨大的单数精灵，这看起来太过分了。我希望有一个不同或更好的方法。如果你不想使用画布，那是唯一的方法。我用这种技术做的，所以你可以走得很远。这就是我害怕埃尔克兰斯的原因。我希望能有一种编程的方法来获取文件，并用一些我不知道的新东西（如HTML5文件系统或Blob等）将其拆分。这是一个很好的答案，但并不完全是我想要的。我确实没有提供足够的细节。最终，我想以旋转的方式对图像进行动画处理，使其成为一个外观独特的图像。我认为作为一个精灵来制作这些图像会过于密集，因为我们谈论的是每幅图像1000x500像素。你能再描述一次你想要实现的目标吗？很难给出完整的细节，因为这是在网络上没有完成的事情，我想成为一个将其创建为可重用库的人。基本上，为了能够从dom中的一个容器中获取6个图像，将每个图像分割为3个相等的片段，并将它们重新分配到dom中的3个单独的容器中，以便按照我的需要对每个片段进行操作。您只需将它们显示为3个图像，或者您实际上是想将它们分开并逐个保存到3个不同的文件中？最好的方法是不要切割任何东西，只是把它们展示出来。将占用最少的cpu时间。我只需要能够获取每个图像，将其拆分为3个相等的部分，然后在每个图像的3个单独包装器中重新插入DOM。不需要保存它们，只需将它们放入DOM中，并在DOM中使用动画等进行操作。

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