拍攝圖像並將其分成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個相同的部分

回答

相關問題