{# Itransformer.es is an online application to transform images
Copyright (C) 2013 Manolo Salsas
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Contact: manolez@gmail.com - http://msalsas.com
#}
{% extends 'MSDHomeBundle::base.html.twig' %}
{% block javascripts %}
{{ parent() }}
<script>
$(function(){
window.scrollTo(0,$(".seccion").offset().top);
})
</script>
{% javascripts '@MSDHomeBundle/Resources/public/js/procesar_img.js' filter='yui_js'%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{% stylesheets '@MSDHomeBundle/Resources/public/css/opciones.css.twig' filter='yui_css'%}
<link rel="stylesheet" type="text/css" charset="UTF-8" media="all" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
{% block sections %}
<div class="articulo"><article>
<div class="header"><header>
<h1>{% trans %}Haz tu elección{% endtrans %}</h1>
<h2>{% trans %}Selecciona las opciones que quieras{% endtrans %}</h2>
</header></div>
<table id="opciones">
<tr>
<th id="basico" style="cursor:pointer"> {% trans %}Basico{% endtrans %} </th>
<th id="filtros" style="cursor:pointer"> {% trans %}Filtros{% endtrans %} </th>
<th id="efectos" style="cursor:pointer"> {% trans %}Efectos{% endtrans %} </th>
</tr>
</table>
<div id="formulario_basico" class="gradient">
<form id="form_basico" action="{{ path('msd_home_vercambios') }}" method="post">
<div id="cambiar_tam" class="accion"><div class="titulo_accion">{% trans %}Cambiar dimensiones{% endtrans %}</div><input id="escalar" class="mostrar-ocultar" name="cambiar_dim" type="checkbox" value="check">
<div id="val_dimensiones" style="display:none;"><hr>
<span class="titulo_opcion">{% trans %}Mantener proporciones{% endtrans %}</span><input id="proporciones" name="mantener_prop" type="checkbox" value="check"><br>
X : <input id="dimensionesX" type="number" min="0" max="6000" value="{{ imagen.ancho }}" name="dimensionesX"><br>
Y : <input id="dimensionesY" type="number" min="0" max="6000" value="{{ imagen.alto }}" name="dimensionesY">
</div></div>
<div id="cambiar_recortar" class="accion"><div class="titulo_accion">{% trans %}Recortar{% endtrans %}</div><input id="recortar" class="mostrar-ocultar" name="modif_recortar" type="checkbox" value="check">
<div id="val_recortar" style="display:none;"><hr><br>
{% trans %}Izquierda{% endtrans %} <input id="recortar_izq" type="number" min="0" max="{{ imagen.ancho }}" value="0" name="recortar_izq"><br><br>
{% trans %}Derecha{% endtrans %} <input id="recortar_der" type="number" min="0" max="{{ imagen.ancho }}" value="0" name="recortar_der"><br><br>
{% trans %}Arriba{% endtrans %} <input id="recortar_arr" type="number" min="0" max="{{ imagen.alto }}" value="0" name="recortar_arr"><br><br>
{% trans %}Abajo{% endtrans %} <input id="recortar_aba" type="number" min="0" max="{{ imagen.alto }}" value="0" name="recortar_aba"><br>
</div></div>
<div id="cambiar_brillo" class="accion"><span class="titulo_accion">{% trans %}Cambiar brillo{% endtrans %}</span><input id="brillo" class="mostrar-ocultar" name="modif_brillo" type="checkbox" value="check">
<div id="val_brillo" style="display:none;"><hr><br><input id="num_brillo" name="brillo" type="number" min="-255" max="255" value="0"></div></div>
<div id="cambiar_contraste" class="accion"><span class="titulo_accion">{% trans %}Cambiar contraste{% endtrans %}</span><input id="contraste" class="mostrar-ocultar" name="modif_contraste" type="checkbox" value="check">
<div id="val_contraste" style="display:none;"><hr><br><input id="num_contraste" name="contraste" type="number" min="-1000" max="1000" value="0"><p></p></div></div>
<div id="cambiar_rotacion" class="accion"><span class="titulo_accion">{% trans %}Rotar{% endtrans %}</span><input id="rotacion" class="mostrar-ocultar" name="rotar" type="checkbox" value="check">
<div id="val_rotacion" style="display:none;"><hr><br><input id="num_rotacion" name="rotacion" type="number" min="0" max="360" value="0"><p></p></div></div>
<div class="apl_cambios"><input class="aplicar" type="submit" value="{% trans %}Aplicar{% endtrans %}">
<button class="atras" formaction="{{ path('msd_home_atras') }}">{% trans %}Atras{% endtrans %}</button>
</div>
</form>
<form id="form_guardar" action="{{ path('msd_home_guardar') }}" method="post">
<input class="guardar" type="submit" value="{% trans %}Guardar imagen{% endtrans %}">
</form>
</div>
<div id="formulario_filtros" class="gradient">
<form id="form_filtros" action="{{ path('msd_home_vercambios') }}" method="post">
<div id="cambiar_grises" class="accion"><span class="titulo_accion">{% trans %}Convertir a grises{% endtrans %}</span><input id="grises" name="convertir_grises" type="checkbox" value="check"></div>
<div id="cambiar_negativo" class="accion"><span class="titulo_accion">{% trans %}Convertir a negativo{% endtrans %}</span><input id="negativo" name="convertir_negativo" type="checkbox" value="check"></div>
<div id="cambiar_bordes" class="accion"><span class="titulo_accion">{% trans %}Resaltar bordes{% endtrans %}</span><input id="bordes" name="resaltar_bordes" type="checkbox" value="check"></div>
<div id="cambiar_relieve" class="accion"><span class="titulo_accion">{% trans %}Resaltar relieve{% endtrans %}</span><input id="relieve" name="resaltar_relieve" type="checkbox" value="check"></div>
<div id="eliminacion_media" class="accion"><span class="titulo_accion">{% trans %}Eliminación media (ef. superficial){% endtrans %}</span><input id="elim_media" name="elimin_media" type="checkbox" value="check"></div>
<div id="cambiar_borroso" class="accion"><span class="titulo_accion">{% trans %}Poner borroso{% endtrans %}</span><input id="borroso" name="convertir_borroso" type="checkbox" value="check"></div>
<div id="cambiar_borroso_Gauss" class="accion"><span class="titulo_accion">{% trans %}Poner borroso (ef. Gaussiano){% endtrans %}</span><input id="borroso_Gauss" name="convertir_borroso_Gauss" type="checkbox" value="check"></div>
<div id="cambiar_suavizado" class="accion"><span class="titulo_accion">{% trans %}Suavizado{% endtrans %}</span><input id="suavizado" class="mostrar-ocultar" name="convertir_suavizado" type="checkbox" value="check">
<div id="val_suavizado" style="display:none;"><hr><br><input id="num_suavizado" name="suavizado" type="number" min="-5000" max="5000" value="0"></div></div>
<div id="cambiar_pixelacion" class="accion"><span class="titulo_accion">{% trans %}Pixelación{% endtrans %}</span><input id="pixelar" class="mostrar-ocultar" class="mostrar-ocultar" name="convertir_pixelacion" type="checkbox" value="check">
<div id="val_pixelacion" style="display:none;"><hr><br><span class="titulo_opcion"> {% trans %}Tamaño de bloque en píxeles{% endtrans %} </span><input id="num_pixelacion" name="pixelar" type="number" min="0" max="1000000" value="0"></div>
</div>
<div id="cambiar_convolucion" class="accion"><span class="titulo_accion">{% trans %}Convolución{% endtrans %}</span><input id="convolucion" class="mostrar-ocultar" name="convertir_convolucion" type="checkbox" value="check">
<div id="val_convolucion_matriz"><hr><span class="titulo_opcion"> {% trans %}Matriz de convolución{% endtrans %} </span><br>
<table><tr>
<td><input id="num_convolucion_matriz_0" name="convolucion_matriz_0" type="number" min="-255" max="255" value="1"></td>
<td><input id="num_convolucion_matriz_1" name="convolucion_matriz_1" type="number" min="-255" max="255" value="1"></td>
<td><input id="num_convolucion_matriz_2" name="convolucion_matriz_2" type="number" min="-255" max="255" value="1"></td>
</tr><tr>
<td><input id="num_convolucion_matriz_3" name="convolucion_matriz_3" type="number" min="-255" max="255" value="1"></td>
<td><input id="num_convolucion_matriz_4" name="convolucion_matriz_4" type="number" min="-255" max="255" value="1"></td>
<td><input id="num_convolucion_matriz_5" name="convolucion_matriz_5" type="number" min="-255" max="255" value="1"></td>
</tr>
</tr><tr>
<td><input id="num_convolucion_matriz_6" name="convolucion_matriz_6" type="number" min="-255" max="255" value="1"></td>
<td><input id="num_convolucion_matriz_7" name="convolucion_matriz_7" type="number" min="-255" max="255" value="1"></td>
<td><input id="num_convolucion_matriz_8" name="convolucion_matriz_8" type="number" min="-255" max="255" value="1"></td>
</tr>
</table></div>
<div id="val_convolucion_divisor"><br><span class="titulo_opcion"> {% trans %}Divisor{% endtrans %} </span><input id="num_convolucion_divisor" name="convolucion_divisor" type="number" min="-255" max="1000" value="1000"><br>
<span class="titulo_accion"> {% trans %}Divisor automático{% endtrans %} </span><input id="divisor_conv_auto" name="divisor_convolucion_auto" type="checkbox" value="check">
</div>
<div id="val_convolucion_offset"><span class="titulo_opcion"> Offset </span><input id="num_convolucion_offset" name="convolucion_offset" type="number" min="-1000" max="1000" value="0">
</div></div>
<div id="cambiar_gamma" class="accion"><span class="titulo_accion">{% trans %}Corrección gamma{% endtrans %}</span><input id="correccion_gamma" class="mostrar-ocultar" name="convertir_gamma" type="checkbox" value="check">
<div id="val_entrada_gamma"><hr><span class="titulo_opcion"> {% trans %}Entrada gamma{% endtrans %} </span><input id="num_entrada_gamma" name="entrada_gamma" type="number" min="-50" max="50" value="0"></div>
<div id="val_salida_gamma"><span class="titulo_opcion"> {% trans %}Salida gamma{% endtrans %} </span><input id="num_salida_gamma" name="salida_gamma" type="number" min="-50" max="50" value="0"></div>
</div>
<div class="apl_cambios"><input class="aplicar" type="submit" value="{% trans %}Aplicar{% endtrans %}">
<button class="atras" formaction="{{ path('msd_home_atras') }}">{% trans %}Atras{% endtrans %}</button>
</div>
</form>
<form id="form_guardar" action="{{ path('msd_home_guardar') }}" method="post">
<input class="guardar" type="submit" value="{% trans %}Guardar imagen{% endtrans %}">
</form>
</div>
<div id="formulario_efectos" class="gradient">
<form id="form_efectos" action="{{ path('msd_home_vercambios') }}" method="post">
<div id="cambiar_colorear" class="accion"><span class="titulo_accion">{% trans %}Colorear{% endtrans %}</span><input id="colorear" class="mostrar-ocultar" name="convertir_colorear" type="checkbox" value="check">
<div id="val_colorear_r"><hr><span class="titulo_opcion"> {% trans %}Rojo{% endtrans %} </span><input id="num_colorear_r" name="colorear_r" type="number" min="0" max="255" value="0"></div>
<div id="val_colorear_g"><span class="titulo_opcion"> {% trans %}Verde{% endtrans %} </span><input id="num_colorear_g" name="colorear_g" type="number" min="0" max="255" value="0"></div>
<div id="val_colorear_b"><span class="titulo_opcion"> {% trans %}Azul{% endtrans %} </span><input id="num_colorear_b" name="colorear_b" type="number" min="0" max="255" value="0"></div>
<div id="val_alfa"><span class="titulo_opcion"> {% trans %}Alfa (transparencia){% endtrans %} </span><input id="num_alfa" name="alfa" type="number" min="0" max="127" value="0"></div>
</div>
<div id="cambiar_resaltar_colores" class="accion"><span class="titulo_accion">{% trans %}Resaltar colores{% endtrans %}</span><input id="resaltar_colores" class="mostrar-ocultar" name="convertir_resaltar_colores" type="checkbox" value="check">
<hr><span class="titulo_accion"> {% trans %}Resaltar rojo{% endtrans %} </span><input id="resaltar_r" name="resaltar_colores_r" type="checkbox" value="check"><br>
<span class="titulo_accion"> {% trans %}Resaltar verde{% endtrans %} </span><input id="resaltar_g" name="resaltar_colores_g" type="checkbox" value="check"><br>
<span class="titulo_accion"> {% trans %}Resaltar azul{% endtrans %} </span><input id="resaltar_b" name="resaltar_colores_b" type="checkbox" value="check">
</div>
<div id="cambiar_atenuar_colores" class="accion"><span class="titulo_accion">{% trans %}Atenuar colores{% endtrans %}</span><input id="atenuar_colores" class="mostrar-ocultar" name="convertir_atenuar_colores" type="checkbox" value="check">
<hr><span class="titulo_accion"> {% trans %}Atenuar rojo{% endtrans %} </span><input id="atenuar_r" name="atenuar_colores_r" type="checkbox" value="check"><br>
<span class="titulo_accion"> {% trans %}Atenuar verde{% endtrans %} </span><input id="atenuar_g" name="atenuar_colores_g" type="checkbox" value="check"><br>
<span class="titulo_accion"> {% trans %}Atenuar azul{% endtrans %} </span><input id="atenuar_b" name="atenuar_colores_b" type="checkbox" value="check">
</div>
<div id="cambiar_efecto_lapiz_super_fino" class="accion"><span class="titulo_accion">{% trans %}Efecto dibujo a lápiz super fino{% endtrans %}</span><input id="lapiz_super_fino" name="convertir_lapiz_super_fino" type="checkbox" value="check"></div>
<div id="cambiar_efecto_lapiz_fino" class="accion"><span class="titulo_accion">{% trans %}Efecto dibujo a lápiz fino{% endtrans %}</span><input id="lapiz_fino" name="convertir_lapiz_fino" type="checkbox" value="check"></div>
<div id="cambiar_efecto_lapiz_normal" class="accion"><span class="titulo_accion">{% trans %}Efecto dibujo a lápiz normal{% endtrans %}</span><input id="lapiz_normal" name="convertir_lapiz_normal" type="checkbox" value="check"></div>
<div id="cambiar_efecto_lapiz_grueso" class="accion"><span class="titulo_accion">{% trans %}Efecto dibujo a lápiz grueso{% endtrans %}</span><input id="lapiz_grueso" name="convertir_lapiz_grueso" type="checkbox" value="check"></div>
<div id="cambiar_efecto_pintura" class="accion"><span class="titulo_accion">{% trans %}Efecto pintura{% endtrans %}</span><input id="pintura" name="convertir_pintura" type="checkbox" value="check"></div>
<div id="cambiar_efecto_che" class="accion"><span class="titulo_accion">{% trans %}Efecto Che Guevara{% endtrans %}</span><input id="che" name="convertir_che" type="checkbox" value="check"></div>
<div id="cambiar_papel_arr" class="accion"><span class="titulo_accion">{% trans %}Efecto papel arrugado{% endtrans %}</span><input id="papel_arr" name="convertir_papel_arr" type="checkbox" value="check"></div>
<div id="cambiar_antiguo" class="accion"><span class="titulo_accion">{% trans %}Efecto antiguo{% endtrans %}</span><input id="antiguo" name="convertir_antiguo" type="checkbox" value="check"></div>
<div id="cambiar_fuego" class="accion"><span class="titulo_accion">{% trans %}Efecto fuego{% endtrans %}</span><input id="fuego" name="convertir_fuego" type="checkbox" value="check"></div>
<div id="cambiar_gotas" class="accion"><span class="titulo_accion">{% trans %}Efecto gotas{% endtrans %}</span><input id="gotas" name="convertir_gotas" type="checkbox" value="check"></div>
<div id="cambiar_luces" class="accion"><span class="titulo_accion">{% trans %}Efecto luces{% endtrans %}</span><input id="luces" name="convertir_luces" type="checkbox" value="check"></div>
<div id="cambiar_colores" class="accion"><span class="titulo_accion">{% trans %}Efecto colores{% endtrans %}</span><input id="colores" name="convertir_colores" type="checkbox" value="check"></div>
<div id="cambiar_molon" class="accion"><span class="titulo_accion">{% trans %}Efecto molón{% endtrans %}</span><input id="molon" name="convertir_molon" type="checkbox" value="check"></div>
<div id="cambiar_marco_horizontal" class="accion"><span class="titulo_accion">{% trans %}Enmarcar (imagen horizontal){% endtrans %}</span><input id="marco_horizontal" name="convertir_marco_horizontal" type="checkbox" value="check"></div>
<div id="cambiar_marco_vertical" class="accion"><span class="titulo_accion">{% trans %}Enmarcar (imagen vertical){% endtrans %}</span><input id="marco_vertical" name="convertir_marco_vertical" type="checkbox" value="check"></div>
<div class="apl_cambios"><input class="aplicar" type="submit" value="{% trans %}Aplicar{% endtrans %}">
<button class="atras" formaction="{{ path('msd_home_atras') }}">{% trans %}Atras{% endtrans %}</button>
</div>
</form>
<form id="form_guardar" action="{{ path('msd_home_guardar') }}" method="post">
<input class="guardar" type="submit" value="{% trans %}Guardar imagen{% endtrans %}">
</form>
</div>
<form id="form_borrar" action="{{ path('msd_home_borrar') }}" method="post">
<input id="borrar" type="submit" value="{% trans %}Eliminar{% endtrans %}"><span class="titulo_opcion"> {% trans %}Volver a adjuntar imagen{% endtrans %} </span>
</form>
</article></div>
{% endblock %}
{% block aside %}
<div id="error_ajax"></div>
<div id="imagen">
<div id="img"><img id="img_cargada" src="{{ path('msd_home_verImagenMuestra') }}" width="{{ imagen.ancho }}" height="{{ imagen.alto }}" data-alto_orig="{{ imagen.alto }}" data-ancho_orig="{{ imagen.ancho }}" ></div>
<canvas id="lienzo"></canvas>
<img id="img_cargando" src="{{ asset('public/img/ajax-loader.gif') }}">
<figcaption>
{% trans %}ancho{% endtrans %}: {{ imagen.ancho }} {% trans %}alto{% endtrans %}: {{ imagen.alto }}
</figcaption>
</div>
{% endblock %}
|
Download
