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

   
Vista:

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

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