jcrop che cambia immagine src dopo il caricamento della pagina

Question

Sto usando jcrop per il ritaglio di immagini al volo e voglio che l'utente abbia la possibilità di cambiare l'immagine prima che inizi a ritagliare.

Per qualche motivo non riesco a cambiare l'immagine.

jsfiddle http://jsfiddle.net/UUKP4/2/

Quando guardo il codice lucciola mostra due elementi img e uno all'interno di un contenitore jcrop senza id.

come posso cambiare l'immagine?

codice

#jcrop_target { 
width:200px; 
} 


$(function() { 
$('#jcrop_target').Jcrop(); 
}); 

function chageImage() { 
alert("hello"); 
$('#jcrop_target').attr('src', 'http://eofdreams.com/data_images/dreams/cat/cat-06.jpg'); 
} 

<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="jcrop_target" /> 
<input type='button' value='change image' id='changeImage' onclick='chageImage();'> 

Answer 1

JCrop crea una copia della tua immagine da utilizzare per il ritaglio. Hai solo bisogno di cambiare il selettore in questo modo:

$('.jcrop-holder img').attr('src', 'http://eofdreams.com/data_images/dreams/cat/cat-06.jpg'); 

http://jsfiddle.net/UUKP4/4/

Answer 2

È possibile utilizzare la funzione setImage(). Quando si inizializza Jcrop, salvare l'oggetto che crea, quindi è possibile chiamare questa funzione quando richiesto.

var JCropper; 

$('#image').Jcrop({ 
    ..setup.. 
} function() { 
    // Save Jcrop object 
    JCropper = this; 
} 

JCropper.setImage('/newimage.jpg'); 

Answer 3

Se si desidera non solo modificare l'URL, ma rimuovere tutti gli stili dal precedente immagine che devi farlo:

$('#image').removeAttr('style');