请求一个关于图片选区的JS效果，要能兼容IE和火狐（W3C标准兼容就可以了），感谢先！

流程是这样的：预期的网页代码：
<!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" >
<head>
    <title>test image select</title>
</head>
<body>
<input type="file" id="userUploadFileObject" onchange="javascript:initBasic(this.value)" />
<br />
<img src="" id="effectImage" />
<input type="hidden" id="selectWidth" />
<input type="hidden" id="selectHeight" />
<input type="hidden" id="selectX" />
<input type="hidden" id="selectY" />
<script type="text/javascript">    var effectImage=document.getElementById("effectImage");
    
    function initBasic(v)
    {
        //图片到时候我会判断一下高和宽，自动缩放一下，确保不让网页被撑破
        effectImage.src=v;
    }</script>
</body>
</html>
当用户改变userUploadFileObject这个对象值的时候（一定是图片文件），我想在effectImage加载完成的时候在它上面加一个功能，就像photoshop选区工具一样，可以按住鼠标拖拉就选择到一个区域（即画出一个虚线框的矩形），然后还可以重新选择，直接在effectImage上面操作就好，拖动范围不能超过当前图片的宽和高，我最后是想把用户所选的区域大小（宽和高）和在图片上的坐标记录下来保存到数据库，请问有这样的代码吗？就是一个选择效果，鼠标拖拉就在图片上画出一个矩形来，如果重新拉拖就重新画一个矩形，前一个就自动消失，而且当用户鼠标移动到选取虚线上方的时候可以改变选区（已画出矩形区域）的高、宽，还可以拖动选区（已画出矩形）的位置，但操作都不能超出图片的宽和高。下面有一个效果：
http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html
但是他是切割图的效果，没有鼠标拉拖（PS选区）画出一个虚线矩形这个功能，而且他这个切割图我不知道要怎么改才能保存选择区域的大小和坐标，他这个效果最好的地方就是可以改变宽高，随意拖动。希望能在用户操作完成后把宽高和坐标塞到<input type="hidden" id="selectWidth" />
<input type="hidden" id="selectHeight" />
<input type="hidden" id="selectX" />
<input type="hidden" id="selectY" />这些对象里面，这样我就能保存到数据库了，小弟万分感谢。

解决方案 »

  1.   


    <html>
    <body>
    <div id=bd style="position:absolute;height:100;width:100;left:103;top:82;background:red;filter:alpha(opacity=50)"ondragover="drag()">
    <table border="1"cellpadding="0"cellspacing="0"style="border-collapse:collapse"bordercolor="#111111"height="100%"width="100%"id="AutoNumber1">
    <tr>
    <td width="100%">　</td>
    </tr>
    </table>
    </div>
    <script>var x0,y0;
    var x1,y1;
    function drags()
    {
    x0=event.clientX;
    y0=event.clientY;}
    function drage(obj)
    {}
    function drag()
    {
    x1=event.clientX;
    y1=event.clientY;
    chg(bd);
    inp.value=event.offsetX+":"+event.offsetY;//相对坐标
    }
    function chg(obj)
    {
    obj.style.left=x0<x1?x0:x1;
    obj.style.top=y0<y1?y0:y1;
    obj.style.width=(x1-x0)>0?x1-x0:x0-x1;
    obj.style.height=(y1-y0)>0?y1-y0:y0-y1;
    }
    </script>
    <p>
    <img border="0"style="cursor:crosshair"src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg" width="448"height="339"ondragstart="drags()" ondragend="drage(this)" ondragover="drag()" ondrop=""></p>
    <input id="inp" size="20">
    </body></html>
      

  2.   

    上一楼的火狐不能运行下面我搞一个 火狐都可以 兼容的，有2个问题 ：
    1、在快速换方向移动的时候不流畅 ，有点卡
    2、矩形画出来后还是一直在画，不能按常规的photoshop 选取框那样，按住鼠标确定起点然后拖动开始画，松开鼠标就应该结束，但这个代码不会结束 ，很郁闷 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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;width:0px;height:0px;left:-100px;top:-100px;}
    </style>
    </head>
    <body onload="init()">
    <div id="dddd" style="width:460px;height:360px; background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg)"></div>
    <div id="infos"></div>
    <script type="text/javascript">
    var ns4 = document.layers;
    var ns6 = document.getElementById && !document.all;
    var dddd=document.getElementById("dddd");
    var infos=document.getElementById("infos");
    var ie4 = document.all;
    var resizing=false;//是否正在画框
    var curPositionX;//当前位置x坐标
    var curPositionY;//当前位置y坐标
    var startPointX;//起点x坐标
    var startPointY;//起点y坐标
    var endPointX;//终点x坐标
    var endPointY;//终点y坐标
    var border=null;//框，就是div
    var counts=0;
    //获取鼠标位置
    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;
      }
    }
    function init(){
        if(ns4) document.captureEvents(Event.MOUSEMOVE);
        dddd.onmousemove=onResize;
        dddd.onclick=onMouseDown;
        //dddd.onmousedown=onMouseDown;
        border=document.createElement("div");
        border.className="sizable_Sheneyan";
        document.body.appendChild(border);
    }
    function onMouseUp(e){
        //alert('s');}
    function onResize(e){
    if(!resizing){return;}
        if(resizing)
        {
        moveToMouseLoc(e);
        drawBorder();
        }    
       
    }
    function onMouseDown(e){
    if((counts/2)==0)
    {
    resizing=true;
    }
    else
    {
    resizing=false;
    }
          if(ns4||ns6){
        curPositionX=e.pageX
        curPositionY=e.pageY;
      }
      else{
        curPositionX=event.x + document.body.scrollLeft;
        curPositionY=event.y + document.documentElement.scrollTop;
      }    startPointX=curPositionX;
        startPointY=curPositionY;
        counts++;
        //drawBorder();
    }
    function drawBorder(){
        endPointX=curPositionX;
        endPointY=curPositionY;
        with(border.style){
            width=Math.abs(startPointX-endPointX)+"px";
            height=Math.abs(startPointY-endPointY)+"px";
            left=Math.min(startPointX,endPointX)+"px";
            top=Math.min(startPointY,endPointY)+"px";
        }
        infos.innerHTML="x:"+Math.min(startPointX,endPointX)+",y:"+Math.min(startPointY,endPointY)+",width:"+Math.abs(startPointX-endPointX)+",height:"+Math.abs(startPointY-endPointY);
    }
    </script></body>
    </html>
      

  3.   

    带滤镜那个，ＦＦ不能运行，主要是ＦＦ对event的处理和ＩＥ不同。
    楼主去看看jQuery吧，它可以避免为兼容性的事操心。
      

  4.   

    是啊，拖动的代码有了，画矩形确实是很难搞的东西，JS 不像 FLASH 有直接的类或者方法可以用，要是FLASH来实现 ，在 文件对接方面又 会纯在问题，现在 JS连图片文件的真实路径都取不到，只能取到文件名。jQuery也是javascript吗？写起来会很难吧？我是JS初学者，太难搞定了
      

  5.   

    画矩形难什么啊，那个带滤镜的例子不就是用个ＤＩＶ实现的吗（我回帖时没看到），只不过又加了滤镜的半透明效果。包括矩形边框是实线还是虚线都可以设置的，看看ＤＩＶ的ＣＳＳ设置就知道了。jQuery是一个用javascript写的库，提供了很方便的功能，只要学会规则，你会发现用起来很方便也很简单，因为它的创作目的就是为了这个，而且好处不单是这些，还有它在兼容性上也帮你做了。对不知道的技术没必要恐惧，因为它们基本都是让你更简单容易地做事。
      

  6.   

    找到一个代码可以画，但是在DIV上面画就会出问题，能帮忙看看吗？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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;width:0px;height:0px;left:-100px;top:-100px;}
    </style>
    </head>
    <body onload="init()">
    <div id="testObject" style="background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg);width:460px;height:360px">
    &nbsp;
    </div>
    <script type="text/javascript">
    var testObject=document.getElementById("testObject");
    var ns4 = document.layers;
    var ns6 = document.getElementById && !document.all;
    var ie4 = document.all;
    var resizing=false;//是否正在画框
    var curPositionX;//当前位置x坐标
    var curPositionY;//当前位置y坐标
    var startPointX;//起点x坐标
    var startPointY;//起点y坐标
    var endPointX;//终点x坐标
    var endPointY;//终点y坐标
    var border=null;//框，就是div
    //获取鼠标位置
    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 init(){
        if(ns4) document.captureEvents(Event.MOUSEMOVE);
        //document.onmousemove=onResize;
        //document.onmouseup=onMouseUp;
        //document.onmousedown=onMouseDown;
        testObject.onmousemove=onResize;
        testObject.onmouseup=onMouseUp;
        testObject.onmousedown=onMouseDown;
        border=document.createElement("div");
        border.className="sizable_Sheneyan";
        document.body.appendChild(border);
    }
    function onMouseUp(e){
        if (resizing){
            drawBorder();
            resizing=false;
        }
    }
    function onResize(e){
        moveToMouseLoc(e);
        if (resizing==false)
            return true;
        drawBorder();
    }
    function onMouseDown(e){
        if (resizing==true)
            return true;
        resizing=true;
        startPointX=curPositionX;
        startPointY=curPositionY;
        drawBorder();
    }
    function drawBorder(){
        endPointX=curPositionX;
        endPointY=curPositionY;
        with(border.style){
            width=Math.abs(startPointX-endPointX)+"px";
            height=Math.abs(startPointY-endPointY)+"px";
            left=Math.min(startPointX,endPointX)+"px";
            top=Math.min(startPointY,endPointY)+"px";
        }
    }
    </script>
    </body>
    </html>
      

  7.   

    上面代码在干净的BODY区域画没有任何问题，而且很流畅，但在DIV上面画就会感觉有点卡，而且鼠标松开后不能停止画，也不能控制鼠标移动只能在图像区域拖动。
      

  8.   

    这个代码好像可以控制在矩形内画
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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;width:0px;height:0px;left:-100px;top:-100px;}
    </style>
    </head>
    <body onload="init()">
    <div id="testObject" style="background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg);width:460px;height:360px; margin:auto; padding:auto; text-align:center">
    &nbsp;
    </div>
    <script type="text/javascript">
    var testObject=document.getElementById("testObject");
    var ns4 = document.layers;
    var ns6 = document.getElementById && !document.all;
    var ie4 = document.all;
    var resizing=false;//是否正在画框
    var curPositionX;//当前位置x坐标
    var curPositionY;//当前位置y坐标
    var startPointX;//起点x坐标
    var startPointY;//起点y坐标
    var endPointX;//终点x坐标
    var endPointY;//终点y坐标
    var border=null;//框，就是div
    //获取鼠标位置
    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 init(){
        if(ns4) document.captureEvents(Event.MOUSEMOVE);
        //document.onmousemove=onResize;
        //document.onmouseup=onMouseUp;
        //document.onmousedown=onMouseDown;
        testObject.onmousemove=onResize;
        testObject.onmouseup=onMouseUp;
        testObject.onclick=onMouseDown;
        //testObject.ondblclick=ondblclick2;
        border=document.createElement("div");
        border.className="sizable_Sheneyan";
        document.body.appendChild(border);
    }
    function ondblclick2(e)
    {
    resizing=false;
    return true;}
    function onMouseUp(e){
        if (resizing){
            drawBorder();
            resizing=false;
        }
    }
    function onResize(e){    moveToMouseLoc(e);
        if (resizing==false)
            return true;
            //if(!resizing){break;}
        drawBorder();
    }
    function onMouseDown(e){
        if (resizing==true)
            return true;
        resizing=true;
        startPointX=curPositionX;
        startPointY=curPositionY;
        drawBorder();
    }
    function drawBorder(){
        endPointX=curPositionX;
        endPointY=curPositionY;
        with(border.style){
            width=Math.abs(startPointX-endPointX)+"px";
            height=Math.abs(startPointY-endPointY)+"px";
            left=Math.min(startPointX,endPointX)+"px";
            top=Math.min(startPointY,endPointY)+"px";
        }
    }
    </script>
    </body>
    </html>