jcrop zmienia obraz po załadowaniu strony

Question

Używam jcrop do kadrowania obrazu w locie i chcę, aby użytkownik miał możliwość zmiany obrazu przed rozpoczęciem kadrowania.

Z jakiegoś powodu nie mogę zmienić obrazu.

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

Gdy spojrzeć na kod w świetlika to pokazuje dwa elementy img i jeden jest w pojemniku jcrop bez id.

Jak mogę zmienić obraz?

kod

#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 tworzy kopię obrazu użyć do kadrowania. Trzeba tylko zmienić selektor tak:

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

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

Answer 2

Można użyć funkcji setImage(). Po zainicjowaniu Jcrop, zapisz obiekt, który kreuje, dzięki czemu możesz wywołać tę funkcję, gdy jest to wymagane.

var JCropper; 

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

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

Answer 3

Jeśli chcesz nie tylko zmienić adres URL, ale usunąć wszystkie style od poprzedniego obrazu trzeba zrobić:

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