jcrop 在页面加载后更改图像 src答案

【问题标题】：jcrop changing image src after page loadjcrop 在页面加载后更改图像 src
【发布时间】：2013-08-23 11:57:57
【问题描述】：

我正在使用 jcrop 动态裁剪图像，并希望用户在开始裁剪之前可以选择更改图像。

由于某种原因，我无法更改图像。

当我查看 firefly 中的代码时，它显示了两个 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();'>

【问题讨论】：

标签： jquery image jcrop

【解决方案1】：

如果您不仅要更改 url，而且要从以前的图像中删除所有样式，则必须这样做：

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

【讨论】：

【解决方案2】：

您可以使用 setImage() 函数。初始化 Jcrop 时，保存它创建的对象，以便在需要时调用此函数。

var JCropper;

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

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

【讨论】：

【解决方案3】：

JCrop 会为您的图像创建一个副本以用于裁剪。您只需要像这样更改选择器：

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

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

【讨论】：