这个页面马上就要打开了
你准备好了吗?不要紧张哦
嘿嘿
Sep
4

不用FLASH,纯ASP+JS实现图片在线裁剪

 找了很久都找不到ASP下在线裁剪的解决办法,结果竟然被同事的弟弟找到了,他还不是专业做这个的,真惭愧。。。。

      这段代码只需要IIS装好aspjpeg组件就好了,一般服务器都会装这个很实用的组件。

 

 

<%

the_img="request("img")"                             ‘引号内是需要处理的图片地址

response.Write(Server.MapPath(the_img))               '显示物理地址,实际操作中可以删除

Set Jpeg = Server.CreateObject("Persits.Jpeg")        ‘创建对象

jpeg.RegKey = "48958-77556-02411"                       ’我装的aspjpeg是破解版的所以需要这行是这个组件的注册码

Jpeg.Open Server.MapPath(the_img)                        ‘其它的就不用多说了,实际过程中可以自行书写

the_img_width=jpeg.Width 

the_img_Hight=jpeg.Height

%>

<HTML xmlns:v>

<style type="text/css">

<!--

#Layer1 {

position:absolute;

left:850px;

top:203px;

width:121px;

height:31px;

z-index:1;

}

-->

</style> 

<BODY> 

<div id="Layer1">

   <form name="form1" method="post" action="upload1.asp">

     <input type="button" value="坐标" onClick="alert(bxHoleMove1.style.left + bxHoleMove1.style.top + bxHoleMove2.style.left + bxHoleMove3.style.top)">

     <input type="button" value="保存" onClick="crop()">

     <input name="x" type="hidden" id="x">

     <input name="y" type="hidden" id="y">

     <input name="x1" type="hidden" id="x1">

     <input name="y1" type="hidden" id="y1">

     <input name="the_img" type="hidden" id="the_img" value="<%=request("the_img")%>">

   </form>

</div>

<style> 

#tbHole td{background:white;filter:alpha(opacity=50);-moz-opacity:.5} 

#tbHole img{width:1;height:1;visibility:hidden} 

v\:*{behavior:url(#default#vml)} 

</style> 

<div id=bxHole onselectstart=return(false) ondragstart=return(false) onmousedown=return(false) oncontextmenu=return(false) style="position:absolute;left:0;top:0;width:<%=the_img_width%>;height:<%=the_img_Hight%>;border:1px solid #808080;background:url(<%=the_img%>)"> 

     <table id=tbHole cellpadding=0 cellspacing=0 width=100% height=100% style=position:absolute> 

         <tr><td><img></td><td width=120><img></td><td><img></td></tr> 

         <tr height=140> 

             <td><img></td> 

             <td onmousedown=$('bxHole').dragStart(event,0) style="background:transparent;filter:;-moz-opacity:1;cursor:move;border:1px solid white !important"><img></td> 

             <td><img></td> 

         </tr> 

         <tr><td><img></td><td><img></td><td><img></td></tr> 

     </table> 

     <img id=bxHoleMove1 src=upload/41.gif onmousedown=$('bxHole').dragStart(event,1) style="cursor:nw-resize;position:absolute;width:5;height:5;border:1px solid white;background:#BCBCBC"> 

     <img id=bxHoleMove2 src=upload/41.gif onmousedown=$('bxHole').dragStart(event,2) style="cursor:sw-resize;position:absolute;width:5;height:5;border:1px solid white;background:#BCBCBC"> 

     <img id=bxHoleMove3 src=upload/41.gif onmousedown=$('bxHole').dragStart(event,3) style="cursor:nw-resize;position:absolute;width:5;height:5;border:1px solid white;background:#BCBCBC"> 

     <img id=bxHoleMove4 src=upload/41.gif onmousedown=$('bxHole').dragStart(event,4) style="cursor:sw-resize;position:absolute;width:5;height:5;border:1px solid white;background:#BCBCBC"> 

</div> 

<div id=bxImgHoleShow style="position:absolute;left:850;top:50;width:120;height:140;border:1px solid #808080;overflow:hidden"></div> 

</BODY> 

</html> 

<script> 

function $(obj){ 

     return typeof(obj)=="object"?"obj":document.getElementById(obj) 

 

function bxHole_ini(){ 

     var bx=$("bxHole"),tb=$("tbHole") 

     $("bxImgHoleShow").innerHTML="<"+(document.all?"v:image":"img")+" id=imgHoleShow src='<%=the_img%>' style='position:absolute;left:0;top:0;width:<%=the_img_width%>;height:<%=the_img_Hight%>' />" 

     bx.w0=tb.rows[0].cells[1].offsetWidth 

     bx.h0=tb.rows[1].offsetHeight 

     bx.w_img=$("imgHoleShow").offsetWidth 

     bx.h_img=$("imgHoleShow").offsetHeight 

     bx.dragStart=function(e,dragType){ 

         bx.dragType=dragType 

         bx.px=tb.rows[0].cells[0].offsetWidth 

         bx.py=tb.rows[0].offsetHeight 

         bx.pw=tb.rows[0].cells[1].offsetWidth 

         bx.ph=tb.rows[1].offsetHeight 

         bx.sx=e.screenX 

         bx.sy=e.screenY 

     } 

     bx.onmouseup=function(){ 

         if(bx.dragType==null) 

             return 

         var w=tb.rows[0].cells[1].offsetWidth,h=tb.rows[1].offsetHeight 

         bx.dragType=null 

         if(w/h>bx.w0/bx.h0) 

             tb.rows[0].cells[1].style.width=h*bx.w0/bx.h0 

         else 

             tb.rows[1].style.height=w*bx.h0/bx.w0 

         bx.setTip() 

     } 

     bx.onmousemove=function(e){ 

         var x,y,w,h 

         if(bx.dragType==null) 

             return 

         if(e==null) 

             e=event 

         x=Math.max(bx.px+e.screenX-bx.sx,1) 

         y=Math.max(bx.py+e.screenY-bx.sy,1) 

         w=Math.min(bx.pw+e.screenX-bx.sx,tb.offsetWidth-bx.px-1) 

         h=Math.min(bx.ph+e.screenY-bx.sy,tb.offsetHeight-bx.py-1) 

         if(bx.dragType==0){ 

             x=Math.min(x,tb.offsetWidth-bx.pw-1) 

             y=Math.min(y,tb.offsetHeight-bx.ph-1) 

             w=bx.pw 

             h=bx.ph 

         } 

         if(bx.dragType==1||bx.dragType==4) 

             w=bx.pw+bx.px-x 

         if(bx.dragType==1||bx.dragType==2) 

             h=bx.ph+bx.py-y 

         if(bx.dragType==2||bx.dragType==3) 

             x=bx.px 

         if(bx.dragType==3||bx.dragType==4) 

             y=bx.py 

         w=Math.max(w,bx.w0/2) 

         h=Math.max(h,bx.h0/2) 

         if(bx.dragType==1||bx.dragType==4) 

             x=bx.pw+bx.px-w 

         if(bx.dragType==1||bx.dragType==2) 

             y=bx.ph+bx.py-h 

         tb.rows[0].cells[0].style.width=x 

         tb.rows[0].cells[1].style.width=w 

         tb.rows[0].style.height=y 

         tb.rows[1].style.height=h 

         $("bxHole").setTip() 

     } 

     bx.setTip=function(){ 

         var x=tb.rows[0].cells[0].offsetWidth,y=tb.rows[0].offsetHeight,w=tb.rows[0].cells[1].offsetWidth,h=tb.rows[1].offsetHeight 

         var img=$("imgHoleShow"),per 

         $("bxHoleMove1").style.left=$("bxHoleMove4").style.left=x-3 

         $("bxHoleMove1").style.top=$("bxHoleMove2").style.top=y-3 

         $("bxHoleMove2").style.left=$("bxHoleMove3").style.left=x+w-4 

         $("bxHoleMove3").style.top=$("bxHoleMove4").style.top=y+h-4 

 

         if(w/h>bx.w0/bx.h0) 

             w=h*bx.w0/bx.h0 

         else 

             h=w*bx.h0/bx.w0 

         per=bx.h0/h 

         img.style.width=per*bx.w_img 

         img.style.height=per*bx.h_img 

         img.style.left=-x*per 

         img.style.top=-y*per 

     } 

     bx.setTip() 

function crop()

{

//var x,y,x1,y1;

form1.x.value=bxHoleMove1.style.left;

form1.y.value=bxHoleMove1.style.top;

form1.x1.value=bxHoleMove2.style.left;

form1.y1.value=bxHoleMove3.style.top;

//ww=imgHoleShow.style.width

//hh=imgHoleShow.style.height

//location.href='upload1.asp?x='+x+'&y='+y+'&x1='+x1+'&y1='+y1;

form1.submit();

}

bxHole_ini() 

</script>

 
 
感谢同事,帮我解决了一个难题。。。。。

 

  • 相关文章:
  • quote 2.包包
  • 这是我的upload1.asp里保存裁剪的关键代码,只做参考


    <%x=replace(request.form("x"),"px","")
    y=replace(request.form("y"),"px","")
    x1=replace(request.form("x1"),"px","")
    y1=replace(request.form("y1"),"px","")
    the_img=request.form("the_img")
    if x<>"" and y<>"" and x1<>"" and y1<>"" and the_img<>"" then

    '=========裁剪图片=========
    Set Jpeg = Server.CreateObject("Persits.Jpeg")
    jpeg.RegKey = "48958-77556-02411"
    jpeg.open server.MapPath(""&the_img&"")

    if error then%>
    <script language=javascript>
    window.location.href='imgset.asp';
    alert("图片数据错误,请重新选择!")
    </script>
    <%
    end if
    jpeg.crop x,y,x1,y1 '开始切割其实是把超过52象素的下部分去
    jpeg.width=120
    Jpeg.Height =150
    formPath="****" '星号是你要保存图片的路径

    filename=formPath&now()
    jpeg.save server.MapPath(""&filename&".jpg")
    jpeg.close
    set jpeg=nothing
    '==end======保存数据start=========

    到此,图片已经裁剪成功了,地址是"&filename&".jpg
    可以进行接下来的数据操作


    else
    %>
    <script language=javascript>
    window.location.href='imgset.asp';
    alert("图片数据错误,请重新选择!")
    </script>
    <%end if%>
    %>
  • 2009-4-8 11:31:28 回复该留言
  • quote 1.zhiye
  • 请问upload1.asp处理函数,可否发给我看下!
    谢谢wuhengqiao@126.com
  • 2009-4-8 10:46:07 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Spirit Build 80722

Copyright 2008 smgral.cn. All Rights Reserved
宁ICP备08000312号