获取图像并将其分割为3个相等的部分
获取图像并将其分割为3个相等的部分
提问于 2014-10-20 02:31:25
我试着搜索，但没有找到一种方法来具体做我正在寻找的东西。我甚至不确定它能不能做到，但我认为这个很棒的社区可以提供帮助。
我想拍一张照片，把它分成3个相等的部分(左，中，右)，然后做我要做的事情。
而不是从一开始就将其设置为3个部分，我希望能够在DOM中获取一个容器，用...5-6个图像，然后将被分割并放入3个大小相等的容器中。
我知道如何轻松地完成剩下的工作，只是不确定如何在javascript中从DOM中获取图像，将其分割为3个相等的部分。
我不想做画布或svg等。
这有可能吗？
谢谢!
回答 3
Stack Overflow用户
发布于 2014-10-20 02:38:17
我不知道你到底是什么意思。你想做一个包含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 }由于缺乏信息，我不能说更多。
Stack Overflow用户
发布于 2014-10-20 03:14:39
现在意识到这不可能是我想要的方式。谢谢你的帮助。
Stack Overflow用户
发布于 2014-10-20 03:15:02
好的，那么在所有这些信息之后。一种方法可能是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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26453954
复制相关文章
相似问题
腾讯云开发者
