jcrop changing image src after page load

Question

I am using jcrop for image cropping on the fly and want the user to have the option of changing the image before they start to crop.

For some reason I cannot get the image to change.

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

When I look at the code in firefly it shows two img elements and one being inside a jcrop container with no id.

how can I change the image?

code

#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 creates a copy of your image to use for cropping. You just need to change the selector like so:

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

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

Answer 2

You can use the setImage() function. When you initialise Jcrop, save the object it creats, so you can call this function when required.

var JCropper;

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

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