una - javascript mostrar imagen

¿Cómo crear una imagen de vista previa mediante el apilamiento de imágenes transparentes basadas en las selecciones de formularios con JavaScript?

Question

Utilizando HTML, CSS y JavaScript, necesito crear un formulario con campos de entrada de selección y campos de selección de radio. Cuando se selecciona cada uno de estos campos, debo crear una imagen de vista previa en función de la selección realizada.

Cada campo tendrá una imagen asociada y, a continuación, también tendrá esa misma imagen replicada para cada color.

Por lo tanto, si hubiera 20 campos de formulario que un usuario pudiera elegir, tendría 20 imágenes x 10 opciones de color diferentes y daría como resultado 200 imágenes posibles para crear una imagen de vista previa.

Aquí hay una imagen que muestra un ejemplo de lo que estoy tratando de lograr ... el sitio web de Vans usa esta técnica para un generador de zapatos personalizado con vista previa ...

Cuando selecciona una sección y luego el color para esa sección, carga una imagen transparente y las apila juntas.

Para las pruebas, he hecho un conjunto de imágenes transparentes para una forma de demostración con solo 4 campos y 3 opciones de color, por lo que 12 imágenes en total. (Todo se muestra a continuación)

Cuando se hayan seleccionado todos los campos, se debe crear una vista previa de la imagen para el usuario que sea similar a esto ...

o la alternativa tiene una parte superior / techo más como una forma de tipo octágono

bottom_blue

bottom_green

bottom_red

entrada_blue

entrada_green

entrada_red

top_blue

top_green

top_red

top_red_octo

top_blue_octo

top_green_octo

Aquí hay una forma básica que podría usar las imágenes ...

http://jsfiddle.net/Pha4V/

<form id="form-ChannelType">
<p>
Select a bottom (just 1 in the demo)<br>
<select name="bottom" class="form-control" id="bottom" size="1">
<option value="bottom1">Bottom 1</option>
</select>
</p>
<p>
Select a Front (just 1 in the demo)<br>
<select name="front" class="form-control" id="front-1" size="1">
<option value="front1">Front 1</option>
</select>
</p>
<p>
Select a Top<br>
<select name="bottom" class="form-control" id="bottom" size="2">
<option value="bottom_triangle">Triangle Shaped Top</option>
<option value="bottom_octo">Octo. Shaped Top</option>
</select>
</p>
<p>
Select a Color<br>
<select name="color" class="form-control" id="color" size="3">
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
</select>
</p>
</form>

¿Alguien puede ayudarme en la lógica de cómo hacer que una forma funcione? Necesito hacer que funcione de una manera que pueda escalar fácilmente a cientos de opciones e imágenes.

Con el formulario básico anterior, sería necesario crear una imagen de vista previa apilando las imágenes apropiadas en función de las selecciones de formulario. No espero que nadie haga todo el trabajo por esto a menos que simplemente esté preparado para el desafío, pero agradecería cualquier ayuda o idea sobre cómo hacer que esto funcione mejor.

NOTA: Mi proyecto final que se basará en esto será muy diferente. Se utilizará para un generador de señal personalizado. No puedo usar las bibliotecas de ImageMagick o GD para hacer las imágenes sobre la marcha, por lo que cada imagen debe construirse y cada capa cambiarse. En lugar de construir una estructura de casa simple, tendré opciones como ...

• Tipo de signo que determinará una gran cantidad de la configuración que se muestra u oculta después de que se basa en el tipo de signo seleccionado.
• La fuente de la imagen base tendrá una para cada fuente y en cada fuente también estará en cada color. Por lo tanto, 10 fuentes x 15 colores = podrían ser fácilmente más de 150 imágenes posibles para mostrar como la imagen BASE
• Colores Habrá de 2 a 4 opciones de colores diferentes que cambiarán el color para diferentes partes del cartel. Así que todas las combinaciones de imágenes enumeradas arriba x las diferentes áreas de color = muchas imágenes

Así que puedes ver que esta será una bestia bastante grande cuando todo esté listo y podría usar cualquier ayuda para tener un buen comienzo. No creo que un ENORME if / else o una declaración de cambio sea la mejor manera de ir con algo como esto que puede tener cientos de combinaciones de imágenes pero ¿podría estar equivocado?

Answer 1

Solo porque se puede - una solución CSS3 pura

Bien, para sus propósitos, una solución css pura probablemente no sea ideal (e incluso el título de su pregunta indica javascript). Sin embargo, solo para demostrar que se puede hacer únicamente con CSS en los navegadores que reconocen CSS3, aquí está la prueba. Se debe dar mucho crédito, ya que el violín, html y css tienen algunos recursos iniciales jsfiddle.net/Pha4V/3 de jsfiddle.net/Pha4V/3 que usó el código para funcionar. Probado en Firefox 25, Chrome 31, IE10.

Demostración de violín

HTML

<form>
<h4>Choose the top type:</h4>
<input type="radio" id="TopTriangle" name="TopShape" value="Triangle" checked/>Triangle
<input type="radio" id="TopOctogon" name="TopShape" value="Octogon"/>Octogon
<h4>Choose the top color:</h4>
<input type="radio" id="TopBlue" name="TopColor" value="Blue" checked/>Blue
<input type="radio" id="TopGreen" name="TopColor" value="Green"/>Green
<input type="radio" id="TopRed" name="TopColor" value="Red"/>Red
<h4>Choose the bottom type:</h4>
<input type="radio" id="BotRect" name="BotShape" value="Rectangle" checked />Rectangle
<h4>Choose the bottom color:</h4>
<input type="radio" id="BotBlue" name="BotColor" value="Blue"/>Blue
<input type="radio" id="BotGreen" name="BotColor" value="Green" checked/>Green
<input type="radio" id="BotRed" name="BotColor" value="Red"/>Red
<h4>Choose the entrance color:</h4>
<input type="radio" id="EntBlue" name="EntColor" value="Blue"/>Blue
<input type="radio" id="EntGreen" name="EntColor" value="Green"/>Green
<input type="radio" id="EntRed" name="EntColor" value="Red" checked/>Red
<div class="house">
<div class="top">
<img class="blue triangle" src="http://i.stack.imgur.com/wkRaA.png" />
<img class="green triangle" src="http://i.stack.imgur.com/lHk5X.png" />
<img class="red triangle" src="http://i.stack.imgur.com/LT6Nn.png" />
<img class="blue octogon" src="http://i.stack.imgur.com/0FWGv.png" />
<img class="green octogon" src="http://i.stack.imgur.com/92kyY.png" />
<img class="red octogon" src="http://i.stack.imgur.com/FjF7S.png" />
</div>
<div class="entrance">
<img class="blue" src="http://i.stack.imgur.com/jehkB.png" />
<img class="green" src="http://i.stack.imgur.com/CgYnh.png" />
<img class="red" src="http://i.stack.imgur.com/lHbKP.png" />
</div>
<div class="bottom">
<img class="blue rect" src="http://i.stack.imgur.com/7P8Ua.png" />
<img class="green rect" src="http://i.stack.imgur.com/h2Bpc.png" />
<img class="red rect" src="http://i.stack.imgur.com/jAX1y.png" />
</div>
</div>
</form>

CSS

.house {
width: 100px;
height: 80px;
position: relative;
}
.house .top {
position: absolute;
top: 0px;
z-index: 2;
}
.house .entrance {
position: absolute;
bottom: 0px;
z-index: 3;
}
.house .bottom {
position: absolute;
bottom: 0px;
z-index: 1;
}
img {
width: 80px;
height: 80px;
}
.house img {
display: none; /* default hide all */
}
#TopTriangle:checked ~ #TopBlue:checked ~ .house > .top > .blue.triangle { display: block;}
#TopTriangle:checked ~ #TopGreen:checked ~ .house > .top > .green.triangle { display: block;}
#TopTriangle:checked ~ #TopRed:checked ~ .house > .top > .red.triangle { display: block;}
#TopOctogon:checked ~ #TopBlue:checked ~ .house > .top > .blue.octogon { display: block;}
#TopOctogon:checked ~ #TopGreen:checked ~ .house > .top > .green.octogon { display: block;}
#TopOctogon:checked ~ #TopRed:checked ~ .house > .top > .red.octogon { display: block;}
#BotRect:checked ~ #BotBlue:checked ~ .house > .bottom > .blue.rect { display: block;}
#BotRect:checked ~ #BotGreen:checked ~ .house > .bottom > .green.rect { display: block;}
#BotRect:checked ~ #BotRed:checked ~ .house > .bottom > .red.rect { display: block;}
#EntBlue:checked ~ .house > .entrance > .blue { display: block;}
#EntGreen:checked ~ .house > .entrance > .green { display: block;}
#EntRed:checked ~ .house > .entrance > .red { display: block;}

Answer 2

Creé una aplicación Angular que hace esto, de una manera más flexible.

FIDDLE: jsfiddle.net/Pha4V/3

Puede agregar formas, tipos y colores fácilmente simplemente creando nuevos elementos en una matriz. Además, al tener la estructura definida de esta manera, el código se puede integrar fácilmente con una base de datos.

Ejemplo:

var tops =
[
new Shape("Triangle", "http://i.stack.imgur.com/wkRaA.png", "Blue"),
new Shape("Triangle", "http://i.stack.imgur.com/lHk5X.png", "Green"),
new Shape("Triangle", "http://i.stack.imgur.com/LT6Nn.png", "Red"),
new Shape("Octagonal", "http://i.stack.imgur.com/FjF7S.png", "Red"),
new Shape("Octagonal", "http://i.stack.imgur.com/0FWGv.png", "Blue"),
new Shape("Octagonal", "http://i.stack.imgur.com/92kyY.png", "Green")
];

En el futuro, se pueden agregar fuentes agregando un cuarto parámetro y se pueden agregar nuevos colores simplemente agregando un elemento con ese color.

Nuevo ejemplo de color:

...
new Shape("Octagonal", "http://...", "Cyan")
...

Nuevo ejemplo de tipo de forma:

...
new Shape("Square", "http://...", "Blue")
...

La forma actual de la ''casa'':

Se puede guardar fácilmente, ya que hay variables que definen todas las selecciones:

$scope.topColor, $scope.topType
$scope.bottomColor, $scope.bottomType
...

Diferentes métodos de entrada:

El método de selección se puede cambiar fácilmente, ya que el código no depende de su tipo.

Fuentes de futuro:

Puede agregar fácilmente nuevas formas como fuentes, y copiar la lógica desde ''tops'' y no tendrá que generar tantas imágenes. Tendrás solo que generar imágenes con diferentes fuentes:

var fontBottom =
[
new Shape("Font", "http://...", "Arial"),
new Shape("Font", "http://...", "Arial Black")
];
//Then add the methods and the input.

Answer 3

Me parece que un zapato de cualquier color es simplemente un objeto que tiene forma y textura con algo de color.

• La forma es proporcionada por los lienzos.
• La textura es proporcionada por la transparencia del gradiente que un png puede dar. Puedes generar uno a partir de una imagen en escala de grises de tus zapatos.
• y el color es proporcionado por valores rgb y códigos alfa.

Usted "corta" (diseña y carga) las formas y la textura para adaptarlas a la imagen de su zapato. Eso es una imagen por sección. Tienes X (4) secciones
Usted define qué colores puede hacer la fábrica. Eso es Y (500?) Colores.

Eso es 2 * X * Y ... tal vez 4000 combinaciones? Y aquí solo hemos cargado 4 imágenes en total.

La parte más difícil es crear los elementos del lienzo, pero se puede hacer con una precisión de píxel y solo tienes un puñado para cada elemento. Probablemente algunas herramientas para hacerlo.

Aquí hay un violín que muestra colores de intercambio. Por supuesto, tendrías un selector para hacer clic y tener mejores formas de zapatos que las que yo tengo.

Violín muy simple

var alpha = 0.4
function createCanvas(id, color, alpha) {
var canvas = document.getElementById(id);
var context;
context = canvas.getContext(''2d'');
context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas first
context.globalAlpha = alpha || 0.4; // transparency could be dynamic
context.beginPath();
switch (id) { // add a case for each piece
case ''left'':
context.moveTo(0, 0);
context.lineTo(0, 200);
context.lineTo(400, 200);
context.arc(200, 100, 75, 50, 50);
break;
case ''right'':
context.moveTo(0, 0);
context.lineTo(200, 200);
context.arc(200, 100, 75, 50, 50);
break;
}
context.closePath();
context.lineWidth = 0;
context.fillStyle = color || ''#8ED6FF''; // dynamic color from provided list
context.fill();
};
createCanvas(''left'', alpha);
createCanvas(''right'', alpha);
// add a couple more peices here
var counter = 0;
// have some kind of color selector
$(''body'').on(''click'', ''canvas'', function () {
console.log(this, counter);
var newShapeColor = $(''div.colors:eq('' + counter + '')'').css(''background-color'');
createCanvas($(this).attr(''id''), newShapeColor, alpha);
counter = (counter < 3) ? counter + 1 : 0;
});

Answer 4

No puedo dedicar mucho tiempo a esto en este momento, pero tengo una respuesta que puede resultarte útil ...

Esto se puede hacer únicamente en jQuery ... Si está apilando imágenes png transparentes, puede envolver cada imagen en su propio div y colocar cada div en una posición absoluta de 0 y 0 dentro de un contenedor primario envolvente.

Puede asignar un índice z dinámicamente a cada contenedor ... y usar este índice z para manipular qué div está delante o detrás de un div anterior. cada vez que seleccione un elemento en el panel de selección, establecerá un índice z correspondiente del elemento correspondiente al número más alto y reducirá el índice z del elemento posicionado en la parte superior anterior en 1 ...

Esto funcionaría bastante como funcionalidad "traer al frente" ..

Puedes intentar construir una versión dinámica de esto con 3 o 4 imágenes primero.

Si recorres esta ruta, también deberás mirar las imágenes de precarga ...

Haz tu lógica es algo como esto ...

Cargar previamente las imágenes. Envuélvalos en divs posicionados dinámicamente. Cree clases dinámicamente nombradas en elementos div para poder generalizar su código. Asigne dinámicamente valores de índice z a divs. al frente y empuje el elemento superior anterior con un índice z hacia abajo.

Espero que esto ayude con la lógica si tu camino es jQuery.

Answer 5

Tengo una idea para otro enfoque que requiere más programación pero que ahorra tiempo cuando hay muchos elementos que deben mantenerse de esta manera.

Con este método, no necesita crear una nueva imagen para cada color y cada parte personalizable.

Ejemplo: 20 elementos con cada 4 secciones personalizables y 20 colores:

Trabajar con imágenes requiere: 20 x 4 x 20 = 1600 imágenes

Trabajando con máscaras de esta solución: 20 x 4 = 80 imágenes

Vamos a crear una máscara para cada sección. Abra la imagen en Photoshop y recorte cada sección personalizable de la imagen. Así que cada parte que quieras poder personalizar en otro color. Haz esta parte negra y todo alrededor transparente. Básicamente, si apilas todas estas "capas" tienes un zapato con negro sólido en cada parte que deseas personalizar.

Guarda estas capas en imágenes separadas. Ahora puede cargar cada capa en un lienzo y reemplazar el negro con el color o el patrón de su elección. Usa estas capas para componer el zapato.

Finalmente, coloca una capa de sombreado que le da al zapato un efecto 3D.

Esquemáticamente se vería como la imagen de abajo. Las máscaras procesadas se convierten en una capa de color. Combinado con una imagen base, se convierte en un elemento coloreado. Tu diseñador solo necesita recortar los parches y listo.

Por mucho, no es el más fácil de codificar, pero no requiere docenas de imágenes precortadas cuando se usan grandes cantidades de colores y patrones.

Answer 6

Teniendo en cuenta que su plan es construir un generador de señales, es posible que solo necesite formas y colores lisos para que las imágenes SVG sean perfectas para usted. Ya está bien soportado .

Incluso si algún día te apetece usar algunos gradientes es hasta algo que puedes lograr con svg. De hecho, puedes dibujar cosas bastante complejas en SVG (consulta http://raphaeljs.com/tiger.html ).

Puedes generar temas con un generador en línea como svg-edit o simplemente Adobe Illustrator e incluso por código, luego te lo recomiendo raphael.js .

De esta manera puede almacenar fácilmente las definiciones de formas de peso ligero sin ninguna consideración de color (o simplemente el color predeterminado si lo desea). En mi ejemplo usé marcadores de posición que reemplacé con los colores seleccionados.

http://codepen.io/svassr/pen/myepF

En el futuro, también podrá insertar texto y usar varios colores para cada forma.

Para dibujar SVG en un lienzo, y luego poder guardar como una imagen usando canvas.toDataURL("image/png") , tendrás que usar canvg .

canvg(document.getElementById(''canvas''), svg);

Dicho esto, si su proyecto hubiera sido similar al generador de zapatas personalizadas de Vans, habría recomendado la solución de @ gillyspy, que me parece la mejor, pero quizás utilizando el enmascaramiento de CSS .