jcrop Bild ändern src nach dem Laden der Seite

Question

Ich benutze jcrop für das schnelle Beschneiden von Bildern und möchte, dass der Benutzer die Möglichkeit hat, das Bild zu ändern, bevor es zuzuschneiden beginnt.

Aus irgendeinem Grund kann ich das Bild nicht ändern.

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

Wenn ich den Code anschauen Glühwürmchen in es zeigt zwei img-Elemente und ein ohne ID in einem jcrop Behälter zu sein.

Wie kann ich das Bild ändern?

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 erstellt eine Kopie Ihres Bildes zum Zuschneiden zu verwenden. Sie müssen nur den Wähler ändern wie folgt:

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

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

Answer 2

Sie die setImage() Funktion verwenden können. Wenn Sie Jcrop initialisieren, speichern Sie das erstellte Objekt, damit Sie diese Funktion bei Bedarf aufrufen können.

var JCropper; 

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

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

Answer 3

Wenn Sie die URL nicht nur ändern wollen, sondern alle Arten von vorherigen Bild entfernen Sie dies tun müssen:

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