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

我试过搜索，但没有找到一种方法来专门做我正在寻找的东西。甚至不知道它可以做到，但认为这个美好的社区可以提供帮助。拍摄图像并将其分成3个相同的部分

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

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

我知道如何轻松地完成剩下的工作，只是不确定如何从javascript中的DOM中将图像分成3个相同的部分。

我不想做帆布或SVG等

这甚至可能吗？

谢谢！

来源

2014-10-19 Christopher Robot

替换树邻近容器，每个容器具有图像作为背景图像。当你正确定位背景时，你会看到只有一个图像的错觉。 – elclanrs 2014-10-19 18:35:15

我之前读过，但唯一的问题是我最终想让图像在旋转类型的动画中生成动画，并解决下一个图像。我想我可以做一个巨大的奇异精灵与它看起来过度的图像。希望有一个不同的或更好的方法。 – 2014-10-19 18:38:08

如果你不想使用画布，这是唯一的方法。我用这种技术制作了一个[图书馆]（http://elclanrs.github.io/jq-tiles/），所以你可以得到很多。 – elclanrs 2014-10-19 18:39:33

我不知道你的意思。你想制作一个有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 }

由于缺乏信息，我不能告诉更多。

来源

2014-10-19 18:38:17 Danon

这是一个很好的答案，但不完全是我在找的东西。的确，我没有提供足够的细节。最终，我想以循环的方式为图像制作动画，让它们以单一的外观形象定位。我认为将图像作为精灵来做会太密集，因为我们正在谈论每张图像1000x500像素。 – 2014-10-19 18:40:26

你能否再描述一次你想要达到的目标？ – Danon 2014-10-19 18:53:56

很难给出完整的细节，因为它不是在网上完成的，我想成为将它创建为可重用的库的一个。基本上，为了能够从dom中的一个容器中取出6张图像，将每个图像分成3个相同的部分，并将它们重新放入到DOM中，以将每个部分用于3个独立的容器，以便操作我需要它们的方式。 – 2014-10-19 18:55:34

现在意识到这是不可能的，我想这样做的方式。感谢帮助。

来源

2014-10-19 19:14:39

好的，所有这些信息之后。一种方法可能是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

来源

2014-10-19 19:15:02 Danon

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

回答

相关问题