jcrop在頁面加載後更改圖像src

Question

我正在使用jcrop進行圖像裁剪，並希望用戶在開始裁剪之前選擇更改圖像。

由於某種原因，我無法讓圖像改變。

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

當我看代碼在螢火蟲它示出了兩個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();'> 

Answer 1

JCrop創建圖像的副本以用於裁剪。你只需要改變選擇，像這樣：

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

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

Answer 2

您可以使用setImage（）函數。當你初始化Jcrop時，保存它創建的對象，這樣你可以在需要時調用這個函數。

var JCropper; 

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

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

Answer 3

如果你想不僅改變了URL，但是從以前的圖像刪除所有的風格，你必須這樣做：

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