/** * A little manager that allows us to swap the image dynamically * */ var CropImageManager = { /** * Holds the current Cropper.Img object * @var obj */ curCrop: null,
/** * Initialises the cropImageManager * * @access public * @return void */ init: function(){ this.attachCropper(); },
/** * Handles the changing of the select to change the image, the option value * is a pipe seperated list of imgSrc|width|height * * @access public * @param obj event * @return void */ onChange: function(e){ var vals = $F(Event.element(e)).split('|'); this.setImage(vals[0], vals[1], vals[2]); },
/** * Sets the image within the element & attaches/resets the image cropper * * @access private * @param string Source path of new image * @param int Width of new image in pixels * @param int Height of new image in pixels * @return void */ setImage: function(imgSrc, w, h){ $('testImage').src = imgSrc; $('testImage').width = w; $('testImage').height = h; this.attachCropper(); },
很幽默吗？
怎么自己没发现呢！那个代码写得很好，
值得好好的研究一下。周日有时间，
要是到时还没解决的话，
帮你搞定。
使用tab键改聚焦对象即可看到效果。
这个sample程序只是用来演示实现的方法。
还有很多的不完善的地方。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title>Dynamic image test</title>
<script src="../lib/prototype.js" type="text/javascript">
</script>
<script src="../lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript">
</script>
<script src="../cropper.js" type="text/javascript">
</script>
<script type="text/javascript" charset="utf-8">
/**
* A little manager that allows us to swap the image dynamically
*
*/
var CropImageManager = {
/**
* Holds the current Cropper.Img object
* @var obj
*/
curCrop: null,
/**
* Initialises the cropImageManager
*
* @access public
* @return void
*/
init: function(){
this.attachCropper();
},
/**
* Handles the changing of the select to change the image, the option value
* is a pipe seperated list of imgSrc|width|height
*
* @access public
* @param obj event
* @return void
*/
onChange: function(e){
var vals = $F(Event.element(e)).split('|');
this.setImage(vals[0], vals[1], vals[2]);
},
/**
* Sets the image within the element & attaches/resets the image cropper
*
* @access private
* @param string Source path of new image
* @param int Width of new image in pixels
* @param int Height of new image in pixels
* @return void
*/
setImage: function(imgSrc, w, h){
$('testImage').src = imgSrc;
$('testImage').width = w;
$('testImage').height = h;
this.attachCropper();
},
/**
* Attaches/resets the image cropper
*
* @access private
* @return void
*/
attachCropper: function(){
if (this.curCrop == null)
this.curCrop = new Cropper.Img('testImage', {
onEndCrop: onEndCrop
});
else
this.curCrop.reset();
},
/**
* Attaches/resets the image cropper
*
* @access private
* @return void
*/
setCropper: function(){
if (this.curCrop == null)
this.curCrop = new Cropper.Img('testImage', {
onEndCrop: onEndCrop
});
var coords = {};
coords.x1 = $('x1').value;
coords.y1 = $('y1').value;
coords.x2 = $('x2').value;
coords.y2 = $('y2').value;
this.curCrop.setAreaCoords(coords, true, true, 1, true);
this.curCrop.selArea.show();
this.curCrop.drawArea();
}
};
// setup the callback function
function onEndCrop(coords, dimensions){
$('x1').value = coords.x1;
$('y1').value = coords.y1;
$('x2').value = coords.x2;
$('y2').value = coords.y2;
$('width').value = dimensions.width;
$('height').value = dimensions.height;
}
// basic example
Event.observe(window, 'load', function(){
CropImageManager.init();
Event.observe($('x1'), 'change', CropImageManager.setCropper.bindAsEventListener(CropImageManager), false);
Event.observe($('y1'), 'change', CropImageManager.setCropper.bindAsEventListener(CropImageManager), false);
Event.observe($('x2'), 'change', CropImageManager.setCropper.bindAsEventListener(CropImageManager), false);
Event.observe($('y2'), 'change', CropImageManager.setCropper.bindAsEventListener(CropImageManager), false);
Event.observe($('imageChoice'), 'change', CropImageManager.onChange.bindAsEventListener(CropImageManager), false);
});
</script>
<link rel="stylesheet" type="text/css" href="debug.css" media="all" />
<style type="text/css">
label {
clear: left;
margin-left: 50px;
float: left;
width: 5em;
}
html, body {
margin: 0;
} #testWrap {
margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
}
</style>
</head>
<body>
<h2>Dynamic image test</h2>
<p>
Test of dynamically changing images or removing & re-applying the cropper
</p>
<div id="testWrap">
<img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
</div>
<p>
<label for="imageChoice">
image:
</label>
<select name="imageChoice" id="imageChoice">
<option value="castle.jpg|500|333">Castle</option>
<option value="poppy.jpg|311|466">Flower</option>
</select>
</p>
<p>
<label for="x1">
x1:
</label>
<input type="text" name="x1" id="x1" />
</p>
<p>
<label for="y1">
y1:
</label>
<input type="text" name="y1" id="y1" />
</p>
<p>
<label for="x2">
x2:
</label>
<input type="text" name="x2" id="x2" />
</p>
<p>
<label for="y2">
y2:
</label>
<input type="text" name="y2" id="y2" />
</p>
<p>
<label for="width">
width:
</label>
<input type="text" name="width" id="width" />
</p>
<p>
<label for="height">
height
</label>
<input type="text" name="height" id="height" />
</p>
</body>
</html>
因为在组件内部进行鼠标点击事件的响应，
我这个地方偷懒没有进行俢改。
因此你在修改过值后不要点击鼠标键，
使用tab触发onchange事件就会看到效果。另外，实际使用的时候，
如果使用键盘进行操作的话，
你还需要加上对于入力值的效验处理。
由于没有加入入力的校验。
因此不要输入太大的值。
输入后使用tab键切换焦点来激发onchange事件就可以了。例如：
入力值（10，10，100，100）下载地址
http://download.csdn.net/source/872461