Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Cambiar imagen con input type="file" en jcrop

JQuery - Cambiar imagen con input type="file" en jcrop

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Cambiar imagen con input type="file" en jcrop

Publicado por Joaquín (11 intervenciones) el 22/08/2017 14:03:54
Me funciona bien jcrop, pero cuando una vez cargada una imagen seleccionando un archivo de imagen quiero sustituirla por otra no funciona, he estado mirando y no me aclaro. Si a alguien le ha ocurrido y me pudiera aconsejar se lo agradecería mucho, pues estoy atascado ahí.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Cambiar imagen con input type="file" en jcrop

Publicado por Joaquín (11 intervenciones) el 23/08/2017 18:53:24
Solucionado y funciona perfecto.
He añadido la siguiente variable: var jcrop_api; como identificador de la API Jcrop de la siguiente manera (eso viene en cualquier tutorial):
1
2
3
4
5
$('#vistaPrevia').Jcrop({
    onChange: SetCoordinates,
    onSelect: SetCoordinates,
…
},function(){jcrop_api = this;});
Y dentro de:
1
2
3
4
5
<script type="text/javascript">
        $(function () {
var jcrop_api;
            $('#imagen').change(function () {
…
El siguiente evento, donde $('#imagen') es le imput file, $('#vistaPrevia') la imagen y canvas el canvas. En líneas generales, primero me cargo lo que tiene que ver con el Jcorp que estaba en uso, después lo que tiene que ver con la imagen (src y estilo), después lo relativo al canvas, estilo y el rectángulo que tenía un tamaño de 450x450. Y por último creo un nuevo Jcrop. Queda así el código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('#imagen').click(function(){
	jcrop_api.destroy();
	$('#vistaPrevia').attr(“src", “”);
	$('#vistaPrevia').removeAttr('style');

	

	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	$('#canvas').removeAttr('style');

	ctx.clearRect(0, 0, 450, 450);



	$('#vistaPrevia').Jcrop({

		onChange: SetCoordinates,

		onSelect: SetCoordinates,

		aspectRatio: 1,

		allowResize:true,

		setSelect:   [0,0,300,300],

		boxWidth: 600, boxHeight: 800

	});

});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar