由于内容过长，把 JS 发到回复里。<html>
<head>
<title>在画框上选取出画的填充区域</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<style type="text/css">
.sizable_Sheneyan{overflow:hidden;position:absolute;border:solid 1px red;width:0px;height:0px;left:-100px;top:-100px;}
</style>
</head>
<body onload="init()" style="margin: 0; padding: 0; font-size: 12px">
<form style="margin: 0" id="form1" method="post" action="saveImage.aspx">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="text-align: right; width: 200px; text-align: right; font-weight: bold"
id="leftTD">
请选择画框横向图片：
</td>
<td style="height: 38px" id="topTD">
<input id="upload_img" type="file" onchange="javascript:onUploadImgChange(this)" /> <span
style="font-family: Tahoma; font-size: 12px" id="infos"></span>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="testObject" style="border: solid 2px blue; width: 200px; height: 200px">
<div id="preview_fake">
<img id="preview" />
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align: right; width: 200px; text-align: right; font-weight: bold"
id="Td1">
请选择画框纵向图片：
</td>
<td style="height: 38px" id="Td2">
<input id="File1" type="file" /> <span style="font-family: Tahoma; font-size: 12px;
color: Red; font-weight: bold" id="infos2">这个没搞定，上面个可以了</span>
</td>
</tr>
<tr>
<td colspan="2" height="30">
<hr />
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="Div1" style="border: solid 2px blue; width: 200px; height: 200px">
<div id="Div2">
<img id="Img1" />
</div>
</div>
</td>
</tr>
</table>
<input type="hidden" id="width1" />
<input type="hidden" id="height1" />
<input type="hidden" id="x1" />
<input type="hidden" id="y1" />
</form>
</body>
</html>
<script type="text/javascript">
var leftTD=document.getElementById("leftTD");
var topTD=document.getElementById("topTD");
var width1=document.getElementById("width1");
var height1=document.getElementById("height1");
var x1=document.getElementById("x1");
var y1=document.getElementById("y1");
var testObject=document.getElementById("testObject");
var infos=document.getElementById("infos");
var leftKeep=parseInt(leftTD.style.width.replace("px",""));
var topKeep1=parseInt(topTD.style.height.replace("px",""));
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
var resizing=false;
var curPositionX;
var curPositionY;
var startPointX;
var startPointY;
var endPointX;
var endPointY;
var border=null;
function moveToMouseLoc(e){
if(ns4||ns6){
curPositionX=e.pageX
curPositionY=e.pageY;
}
else{
curPositionX=event.x + document.body.scrollLeft;
curPositionY=event.y + document.documentElement.scrollTop;
}
return true;
}
function checkObj(e){
var evt = e || event;
var target = evt.target || evt.srcElement;
if (target != testObject && target != border){
return false;
}
return true;
}
function handleSelect(e){
var evt = e || event;
if (evt.preventDefault){
evt.preventDefault();
}
return false;
}
function init(){
if(ns4) document.captureEvents(Event.MOUSEMOVE);
document.body.onmousemove=onResize;
document.body.onmouseup=onMouseUp;
document.body.onmousedown=onMouseDown;
testObject.onselectstart = handleSelect;
border=document.createElement("div");
border.className="sizable_Sheneyan";
border.onselectstart = handleSelect;
document.body.appendChild(border);
}
function onMouseUp(e){
if (resizing){
drawBorder();
resizing=false;
}
document.body.onselectstart = null;
}
function onResize(e){
moveToMouseLoc(e);
if (resizing==false)
return true;
if (!checkObj(e)){
return;
}
drawBorder();
}
function onMouseDown(e){
if (!checkObj(e)){
return;
}
if (resizing==true)
return true;
resizing=true;
document.body.onselectstart = handleSelect;
startPointX=curPositionX;
startPointY=curPositionY;
drawBorder();
}
function getPos(el) {
var topRet = 0, leftRet = 0;
var elm = el;
while (elm != null && elm.offsetTop != null && elm.offsetLeft != null) {
topRet += elm.offsetTop || 0;
leftRet += elm.offsetLeft || 0; if (elm.offsetParent == null) {
break;
} elm = elm.offsetParent;
}
return { top: topRet, left: leftRet };
} function drawBorder(e){
endPointX=curPositionX;
endPointY=curPositionY;
var dw = Math.abs(startPointX-endPointX);
var dh = Math.abs(startPointY-endPointY);
var pos = getPos(testObject);
if (endPointX > startPointX){
var rw = parseInt(testObject.clientWidth) - startPointX + pos.left;
}
else{
var rw = startPointX - pos.left
}
if (dw > rw){
dw = rw;
}
if (dw > 1){
dw -=2;
}
if (endPointY > startPointY){
var rh = parseInt(testObject.clientHeight) - startPointY + pos.top;
}
else{
var rh = startPointY - pos.top
}
if (dh > rh){
dh = rh;
}
if (dh > 1){
dh -=2;
}
var dleft = Math.min(startPointX,endPointX);
var dtop = Math.min(startPointY,endPointY);
if (dleft < pos.left){
dleft = pos.left;
}
if (dtop < pos.top){
dtop = pos.top;
} with(border.style){
width=dw+"px";
height=dh+"px"; left=dleft+"px";
top=dtop+"px";
}
width1.value=dw;
height1.value=dh;
x1.value=dleft-leftKeep;
y1.value=dtop-topKeep1;
infos.innerHTML="x:"+x1.value+",y:"+y1.value+",width:"+width1.value+",height:"+height1.value;
} function getLeft(el){
var left=0;
while(el.offsetParent){
left+=el.offsetLeft;
el=el.offsetParent;
}
return left;
}
function getTop(el){
var top=0;
while(el.offsetParent){
top+=el.offsetTop;
el=el.offsetParent;
}
return top;
} </script> <script type="text/javascript">
var objPreview = document.getElementById("preview");
var objPreviewFake = document.getElementById("preview_fake");
function onUploadImgChange(sender){
if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
alert('图片格式无效！');
return false;
} if( sender.files && sender.files[0] ){ objPreview.style.display='block';
objPreview.src = sender.files[0].getAsDataURL();
testObject.style.background="url("+sender.files[0].getAsDataURL()+")";
loadImage(objPreview);
}else if( objPreviewFake.filters ){
sender.select();
var imgSrc = document.selection.createRange().text;
objPreview.style.display='block';
objPreview.src=imgSrc;
loadImage(objPreview);
testObject.style.background ="url("+imgSrc+")";
}
} function loadImage(obj)
{
var img = new Image();
img = obj;
var appname = navigator.appName.toLowerCase();
if (appname.indexOf("netscape") == -1)
{
//ie
img.onreadystatechange = function () {
if (img.readyState == "complete")
{
setSize(img.width,img.height);
img.style.display='none';
}
};
} else {
//firefox
img.onload = function () {
if (img.complete == true)
{
setSize(img.width,img.height);
img.style.display='none';
}
}
}
} function setSize(w,h)
{
testObject.style.width=w+'px';
testObject.style.height=h+'px';
}
</script>
应该是这样的
<html>
<head>
<title>在画框上选取出画的填充区域</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<style type="text/css">
.sizable_Sheneyan{overflow:hidden;position:absolute;border:solid 1px red;width:0px;height:0px;left:-100px;top:-100px;}
</style>
</head>
<body onload="init()" style="margin: 0; padding: 0; font-size: 12px">
<form style="margin: 0" id="form1" method="post" action="saveImage.aspx">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="text-align: right; width: 200px; text-align: right; font-weight: bold"
id="leftTD">
请选择画框横向图片：
</td>
<td style="height: 38px" id="topTD">
<input id="upload_img" type="file" onchange="javascript:onUploadImgChange(this)" /> <span
style="font-family: Tahoma; font-size: 12px" id="infos"></span>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="testObject" style="border: solid 2px blue; width: 200px; height: 200px">
<div id="preview_fake">
<img id="preview" />
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="30">
<hr />
</td>
</tr>
<tr>
<td style="text-align: right; width: 200px; text-align: right; font-weight: bold"
id="Td1">
请选择画框纵向图片：
</td>
<td style="height: 38px" id="Td2">
<input id="File1" type="file" /> <span style="font-family: Tahoma; font-size: 12px;
color: Red; font-weight: bold" id="infos2">这个没搞定，上面个可以了</span>
</td>
</tr> <tr>
<td>
</td>
<td>
<div id="Div1" style="border: solid 2px blue; width: 200px; height: 200px">
<div id="Div2">
<img id="Img1" />
</div>
</div>
</td>
</tr>
</table>
<input type="hidden" id="width1" />
<input type="hidden" id="height1" />
<input type="hidden" id="x1" />
<input type="hidden" id="y1" />
</form>
</body>
</html>
一个图片一个页，实在搞不定。