Снимая изображение и разбивая его на 3 равные части

Я пробовал искать, но не нашел способ сделать конкретно то, что я ищу. Даже не уверен, что это можно сделать, но подумал, что это замечательное сообщество может помочь.Снимая изображение и разбивая его на 3 равные части

Я хочу взять изображение, разбить его на 3 равные части (левый, средний, правый), а затем сделать то, что я собираюсь сделать с этим.

Вместо того, чтобы просто настроить его с самого начала как 3 части, я хочу, чтобы иметь возможность взять контейнер в DOM, заполнить его с помощью ... 5-6 изображений, которые затем будут разделены и помещены в 3 контейнера с одинаковым размером.

Я знаю, как сделать все остальное легко, просто не уверен, как вы можете взять изображение из DOM в javascript, чтобы разбить его на 3 равные части.

Я не хочу, чтобы сделать холст или SVG и т.д.

даже возможно ли это?

Спасибо!

источник

2014-10-19 Christopher Robot

Заменить изображение с дерева смежных контейнеров, где каждый контейнер имеет изображение в качестве фона. Когда вы правильно позиционируете фон, вы получите иллюзию только одного изображения. – elclanrs

Я читал это раньше, но единственная проблема - в конечном итоге я хотел сделать изображения анимированными в вращающемся типе движения и поселиться на следующем изображении. Я думаю, я мог бы сделать большой особый спрайт с изображениями, которые он просто кажется чрезмерным. Надеюсь, что есть другой или лучший способ. –

Если вы не хотите использовать холст, это единственный способ afaik. Я сделал [библиотеку] (http://elclanrs.github.io/jq-tiles/) с помощью этой техники, так что вы можете получить довольно далеко. – elclanrs

Я не знаю, что на самом деле означает. Вы хотите создать контейнер с 3 равными блоками? Или отображать изображение как 3 отдельные части?

Если вы хотите 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 px на изображение. –

Не могли бы вы еще раз рассказать о том, чего вы пытаетесь достичь? – Danon

Трудно дать полную информацию, потому что это то, что не делается в Интернете, и я хочу быть тем, кто создал его в библиотеке многократного использования.В принципе, чтобы иметь возможность отображать 6 изображений из одного контейнера в dom, разбивайте каждое изображение на 3 равные части и повторно вставляйте их в DOM в 3 отдельных контейнера для каждой части, которую нужно манипулировать, как мне это нужно. –

Понимая, что это не будет возможным, как я хотел бы это сделать. Спасибо за помощь.

источник

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 равные части

ответ

Смежные вопросы