2013-08-21 8 views
5

jcropを使用してイメージをトリミングしています。イメージをトリミングする前に変更するオプションが必要です。jcropイメージをページの後に変更する

何らかの理由で画像が変化することはありません。

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

Iホタルのコードを見ると、2つのimg要素なしIDを持つjcropコンテナ内であるものを示しています。

どのようにイメージを変更できますか?

コード

#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();'> 

答えて

10

JCropは、トリミングに使用するイメージのコピーを作成します。あなたはsetImage()関数を使用することができます

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

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

+0

あなたダ男...歓声 –

+0

が、これは間違いなくそれです!あなたは私の日を救った、ありがとう! –

3

:あなたはそうのようなセレクタを変更する必要があります。 Jcropを初期化するときは、それが作成したオブジェクトを保存するので、必要なときにこの関数を呼び出すことができます。

var JCropper; 

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

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

あなただけのURLを変更しかし、あなたはそうする必要があり、以前のイメージからすべてのスタイルを削除しない場合 :

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